当前位置：首页 > news >正文

简单聊聊Vue

news 来源：原创 2024/10/1 5:33:23

大家好，我是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 详细说明

node_modules/:
- 包含所有通过 npm 安装的项目依赖包和模块。这个目录是自动生成的，不需要手动修改。你可以理解为java项目里面的外部lib包
public/:
- 该目录包含不会被 Webpack 处理的静态资源文件。它主要包含一个 index.html 文件和其他静态资源（如图标）。
- index.html：应用程序的 HTML 模板文件，应用的入口 HTML 文件。
src/:
- 包含项目的源代码，是主要开发目录。
- assets/：
  - 用于存放静态资源（如图片、字体等），这些资源会被 Webpack 处理。
- components/：
  - 用于存放 Vue 组件，通常是项目中可复用的小部件或 UI 组件。
  - HelloWorld.vue：示例组件，通常会被删除或修改以创建新的组件。
- views/：
  - 用于存放页面级别的 Vue 组件。每个视图通常对应一个路由。
  - Home.vue：示例视图组件。
- App.vue：
  - 根组件，是应用程序的顶级组件，其他组件会嵌套在其中。
- main.js：
  - 应用的入口文件，负责初始化 Vue 实例并挂载应用。
- router/：
  - 存放路由相关配置文件。
  - index.js：路由配置文件，定义应用的路由规则。
配置文件：
- .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"
}