简单聊聊Vue

大家好，我是G探险者！

Vue现在可谓前端框架的一哥。

好几年没写，这段时间在整理一个功能，就拉了一个Vue项目。

使用npm run serve这个命令发现启动不起来。这是咋回事，难道我几年不写前端，Vue的默认启动命令都给改了？

带着这个好奇，我就研究了一下。下面分享一下相关问题。

先从vue项目的目录结构说起 。

一个典型的 Vue.js 项目的结构通常由 Vue CLI 初始化生成。下面是一个标准的 Vue 项目结构及其各个文件和目录的作用：

1. 项目结构

my-vue-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

1.1 详细说明

1. node_modules/:

   • 包含所有通过 npm 安装的项目依赖包和模块。这个目录是自动生成的，不需要手动修改。你可以理解为java项目里面的外部lib包

2. public/:

   • 该目录包含不会被 Webpack 处理的静态资源文件。它主要包含一个 index.html 文件和其他静态资源（如图标）。
   • index.html：应用程序的 HTML 模板文件，应用的入口 HTML 文件。

3. src/:

   • 包含项目的源代码，是主要开发目录。

   • assets/：

     • 用于存放静态资源（如图片、字体等），这些资源会被 Webpack 处理。

   • components/：

     • 用于存放 Vue 组件，通常是项目中可复用的小部件或 UI 组件。
     • HelloWorld.vue：示例组件，通常会被删除或修改以创建新的组件。

   • views/：

     • 用于存放页面级别的 Vue 组件。每个视图通常对应一个路由。
     • Home.vue：示例视图组件。

   • App.vue：

     • 根组件，是应用程序的顶级组件，其他组件会嵌套在其中。

   • main.js：

     • 应用的入口文件，负责初始化 Vue 实例并挂载应用。

   • router/：

     • 存放路由相关配置文件。
     • index.js：路由配置文件，定义应用的路由规则。

4. 配置文件：

   • .gitignore：
     • Git 配置文件，定义哪些文件和目录不应该被 Git 追踪。
   • babel.config.js：
     • Babel 配置文件，用于设置 JavaScript 编译器的配置。
   • package.json：
     • 项目的配置文件，包含项目的基本信息、依赖包、脚本等。
   • README.md：
     • 项目说明文件，通常包含项目的介绍、安装和使用说明。
   • vue.config.js：
     • Vue CLI 的配置文件，用于自定义 Vue 项目的构建和开发配置（可选）。

1.2 主要文件和目录作用总结

• public/：存放不经过 Webpack 处理的静态资源，主要是 index.html。
• src/：主要开发目录，包含应用的源代码和所有 Vue 组件。
• components/：存放可复用的小部件或 UI 组件。
• views/：存放页面级别的 Vue 组件。
• App.vue：根组件，是整个应用的顶层组件。
• main.js：应用的入口文件，初始化 Vue 实例。
• router/：存放路由相关配置。
• package.json：项目的配置文件，包含依赖、脚本等。
• 配置文件：如 .gitignore、babel.config.js 和 vue.config.js，用于项目和工具的配置。

2. package.json 文件中的脚本配置

我们启动vue项目的命令脚本通常是在package.json文件中，通常包含以下内容：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

有时候一些项目上会对这些默认的命令进行一些修改和调整，这就导致你使用默认的启动命令运行不起来。

修改 Vue 项目中的默认脚本命令（如 serve、build 和 lint）的场景通常是为了满足特定的项目需求、团队工作流程或部署环境。以下是一些常见的场景及其原因：

3. 修改启动脚本的场景和原因

3.1. 定制化开发流程

有时团队可能会有特定的开发和构建流程，需要运行一些额外的命令或工具。例如：

• 预处理和后处理步骤：在 serve 命令之前或之后运行一些脚本，如清理临时文件、启动其他服务等。
• 环境变量：根据不同的环境（开发、测试、生产）设置不同的环境变量。

"scripts": {
  "dev": "npm run clean && vue-cli-service serve --mode development",
  "test": "npm run clean && vue-cli-service serve --mode test",
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "clean": "rimraf dist"
}

3.2. CI/CD（持续集成/持续部署）

在持续集成/部署过程中，可能需要定制化命令来适应 CI/CD 系统的需求：

• 测试和代码质量检查：在部署之前运行测试和代码质量检查工具，如 Jest、ESLint 等。

"scripts": {
  "ci": "npm run lint && npm run test:unit && npm run build",
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}

3.3. 多环境配置

根据不同的环境需求，创建不同的命令来适应开发、测试、生产环境：

"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production",
  "build:staging": "vue-cli-service build --mode staging",
  "lint": "vue-cli-service lint"
}

3.4. 本地开发辅助工具

为提高本地开发效率，可能会添加一些辅助工具的命令，如启动本地 JSON 服务器、Mock 服务等：

"scripts": {
  "serve": "concurrently \"npm run mock\" \"vue-cli-service serve\"",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "mock": "json-server --watch db.json"
}

3.5. 项目定制化需求

某些项目可能有独特的需求，需要特定的构建步骤或运行命令。例如，构建过程中需要处理国际化文件、生成特定格式的资源文件等：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "npm run generate-i18n && vue-cli-service build",
  "lint": "vue-cli-service lint",
  "generate-i18n": "node scripts/generate-i18n.js"
}

总结

修改 package.json 中的默认命令脚本主要是为了满足项目的特殊需求、优化开发流程、适应不同的环境和部署要求等。通过自定义这些命令，开发者可以更加灵活地管理和构建项目，确保开发和生产环境的一致性和可靠性。所以你在运行vue项目的时候，不妨先看看package.json文件中的脚本部分。