详解 Vue CLI：快速上手指南与核心功能解读 – wiki基地

作者： /

详解 Vue CLI：快速上手指南与核心功能解读

Vue CLI (Command Line Interface) 是 Vue.js 官方提供的一个强大的脚手架工具，旨在帮助开发者快速搭建和管理 Vue.js 项目。它提供了一套完整的项目构建流程，包括项目初始化、开发服务器、依赖管理、代码打包、代码检查、单元测试、以及部署等。Vue CLI 极大地简化了 Vue.js 项目的开发流程，让开发者可以专注于业务逻辑的实现，而不用过多地操心项目配置和构建细节。

本文将深入探讨 Vue CLI 的各个方面，包括安装、使用、核心功能、配置、插件系统、以及与图形化界面 Vue UI 的集成。通过本文，你将对 Vue CLI 有一个全面而深入的了解，并能够熟练地使用它来构建你的 Vue.js 项目。

一、Vue CLI 的安装与项目初始化

1.1 安装 Vue CLI

Vue CLI 的安装非常简单，你需要确保你的系统中已经安装了 Node.js (版本 >= 8.9，推荐 >= 10) 和 npm (Node.js 包管理器，通常随 Node.js 一起安装)。然后，你可以通过以下命令全局安装 Vue CLI：

bash
npm install -g @vue/cli

如果你使用的是 yarn 包管理器，可以使用以下命令：

bash
yarn global add @vue/cli

安装完成后，你可以通过以下命令验证安装是否成功，并查看 Vue CLI 的版本：

“`bash
vue –version

或者

vue -V
“`

如果命令输出了 Vue CLI 的版本号，则说明安装成功。

1.2 创建一个新项目

安装好 Vue CLI 之后，你就可以使用它来创建一个新的 Vue.js 项目了。在命令行中进入你想要创建项目的目录，然后运行以下命令：

bash
vue create my-project

这里的 my-project 是你的项目名称，你可以根据自己的需要进行修改。

运行 vue create 命令后，Vue CLI 会询问你一些问题，以帮助你配置你的项目。

预设选择（Preset）

Vue CLI 提供了两种主要的预设：

  • Default preset (默认预设): 包含基本的 Babel + ESLint 设置，适合快速原型开发。
  • Manually select features (手动选择特性): 允许你自定义项目所需的特性，提供更大的灵活性。

对于初学者，建议先选择默认预设，以便快速开始。随着你对 Vue CLI 的熟悉，你可以选择手动选择特性，以更好地满足你的项目需求。

手动选择特性

如果你选择了手动选择特性，Vue CLI 会提供以下选项供你选择：

  • Babel: 将 ES6+ 代码转换为向后兼容的 JavaScript 代码，以便在旧版浏览器中运行。
  • TypeScript: 使用 TypeScript 进行开发，提供静态类型检查和更好的代码组织。
  • Progressive Web App (PWA) Support: 添加 PWA 支持，使你的应用可以离线使用，并具有类似原生应用的体验。
  • Router: 集成 Vue Router，用于构建单页面应用 (SPA)。
  • Vuex: 集成 Vuex，用于状态管理。
  • CSS Pre-processors: 选择 CSS 预处理器（如 Sass/SCSS, Less, Stylus）。
  • Linter / Formatter: 选择代码检查和格式化工具（如 ESLint, Prettier, Standard）。
  • Unit Testing: 选择单元测试解决方案（如 Jest, Mocha）。
  • E2E Testing: 选择端到端测试解决方案（如 Cypress, Nightwatch）。

你可以使用空格键来选中或取消选中某个特性，使用上下箭头键来移动光标，然后按回车键确认选择。

选择配置存放位置

Vue CLI 会询问你将 Babel, ESLint 等工具的配置放在哪里：

  • In dedicated config files: 将每个工具的配置放在单独的文件中（如 .babelrc, .eslintrc.js）。
  • In package.json: 将配置放在 package.json 文件中。

建议选择将配置放在单独的文件中，这样可以使项目结构更清晰，也更易于维护。

保存为预设
最后，Vue CLI 会询问你是否将本次选择保存为一个预设，以便下次创建项目时可以直接使用。如果你经常需要创建类似的项目，保存预设可以节省你每次配置的时间。

完成以上选择后，Vue CLI 会自动安装项目所需的依赖，并初始化项目结构。

1.3 运行项目

项目创建完成后，进入项目目录：

bash
cd my-project

然后运行以下命令启动开发服务器：

“`bash
npm run serve

或者

yarn serve
“`

这个命令会启动一个本地开发服务器，通常在 http://localhost:8080。你可以在浏览器中打开这个地址，查看你的应用。开发服务器支持热重载 (Hot Reload)，这意味着当你修改代码时，浏览器会自动刷新，无需手动刷新页面。

二、Vue CLI 的核心功能

Vue CLI 提供了许多核心功能，这些功能极大地简化了 Vue.js 项目的开发和管理。

2.1 开发服务器 (Dev Server)

Vue CLI 内置了一个基于 webpack-dev-server 的开发服务器，它提供了以下特性：

  • 热重载 (Hot Reload): 当你的代码发生变化时，浏览器会自动刷新，无需手动刷新。
  • 模块热替换 (Hot Module Replacement, HMR): 在不刷新整个页面的情况下，只更新修改过的模块，这可以保留应用的状态，提高开发效率。
  • 代理 (Proxy): 你可以配置代理，将 API 请求转发到不同的服务器，这在开发跨域应用时非常有用。
  • HTTPS: 你可以启用 HTTPS，以便在开发过程中模拟 HTTPS 环境。
  • 自定义配置: 你可以通过 vue.config.js 文件中的 devServer 选项来配置开发服务器。

2.2 构建 (Build)

当你准备发布你的应用时，你需要构建你的项目。Vue CLI 提供了 build 命令来构建你的项目：

“`bash
npm run build

或者

yarn build
“`

这个命令会将你的项目打包成静态资源，通常会生成一个 dist 目录，其中包含了你的应用的所有文件，包括 HTML、CSS、JavaScript、图片等。你可以将 dist 目录部署到任何静态文件服务器上。

Vue CLI 提供了多种构建目标：

  • 应用 (App): 默认的构建目标，构建一个完整的 Vue.js 应用。
  • 库 (Library): 构建一个 Vue.js 组件库，可以发布到 npm 上供其他项目使用。
  • Web Component: 构建一个 Web Component，可以将你的 Vue.js 组件作为自定义元素在其他框架或原生 HTML 中使用。

你可以通过 --target 参数来指定构建目标：

bash
vue-cli-service build --target lib

2.3 代码检查与格式化 (Linting & Formatting)

Vue CLI 集成了 ESLint 和 Prettier 等代码检查和格式化工具，可以帮助你保持代码风格的一致性，并发现潜在的代码错误。

  • ESLint: 一个 JavaScript 代码检查工具，可以检查代码中的语法错误、潜在的逻辑错误、以及代码风格问题。
  • Prettier: 一个代码格式化工具，可以自动格式化你的代码，使其符合统一的代码风格。

Vue CLI 在创建项目时会询问你是否使用 ESLint 和 Prettier，如果你选择了它们，Vue CLI 会自动安装并配置好这些工具。

你可以通过以下命令运行代码检查：

“`bash
npm run lint

或者

yarn lint
“`

许多编辑器和 IDE 也支持 ESLint 和 Prettier 的集成，可以在你编写代码时实时进行代码检查和格式化。

2.4 单元测试 (Unit Testing)

Vue CLI 支持 Jest 和 Mocha 等单元测试框架，可以帮助你编写和运行单元测试，确保你的代码的质量。

  • Jest: Facebook 开发的一个流行的 JavaScript 测试框架，具有简单易用、功能强大、速度快等特点。
  • Mocha: 一个灵活的 JavaScript 测试框架，可以与各种断言库和测试工具集成。

Vue CLI 在创建项目时会询问你是否使用单元测试，如果你选择了它们，Vue CLI 会自动安装并配置好测试框架。

你可以通过以下命令运行单元测试：

“`bash
npm run test:unit

或者

yarn test:unit
“`

2.5. E2E测试

Vue CLI 支持 Cypress 和 Nightwatch 等端到端 (E2E) 测试框架，可以帮助你模拟用户在浏览器中的操作，对你的应用进行全面的测试。

你可以通过以下命令运行单元测试：

“`bash
npm run test:e2e

或者

yarn test:e2e
“`

2.6 依赖管理 (Dependency Management)

Vue CLI 使用 npm 或 yarn 来管理项目的依赖。你可以在 package.json 文件中查看项目的依赖，并使用 npm 或 yarn 来安装、更新、或删除依赖。

  • npm: Node.js 的包管理器，用于安装、管理、和发布 JavaScript 包。
  • yarn: 一个快速、可靠、安全的依赖管理工具，可以替代 npm。

2.7 环境变量 (Environment Variables)

Vue CLI 支持环境变量，可以让你在不同的环境中使用不同的配置。你可以在项目根目录下创建以下文件来设置环境变量：

  • .env: 全局环境变量，对所有环境都有效。
  • .env.local: 本地环境变量，会覆盖 .env 中的同名变量，但不会被提交到 Git 仓库。
  • .env.[mode]: 特定模式的环境变量，会覆盖 .env 和 .env.local 中的同名变量。[mode] 是你指定的模式，例如 .env.development、.env.production。

你可以在你的代码中通过 process.env 来访问环境变量。例如：

javascript
console.log(process.env.VUE_APP_API_URL);

2.8 PWA 支持 (Progressive Web App Support)

Vue CLI 可以帮助你创建渐进式 Web 应用 (PWA)，使你的应用可以离线使用，并具有类似原生应用的体验。

如果你在创建项目时选择了 PWA 支持，Vue CLI 会自动安装 @vue/pwa 插件，并配置好 Service Worker 等 PWA 相关的功能。

三、Vue CLI 的配置

Vue CLI 的大部分配置都可以通过 vue.config.js 文件进行自定义。vue.config.js 是一个可选的配置文件，如果它存在于项目根目录下，Vue CLI 会自动加载它。

vue.config.js 文件是一个标准的 Node.js 模块，它导出一个包含配置选项的对象。以下是一些常用的配置选项：

  • publicPath: 应用的部署路径，默认为 /。
  • outputDir: 构建输出的目录，默认为 dist。
  • assetsDir: 静态资源（如 CSS、JS、图片）存放的目录，相对于 outputDir，默认为空。
  • indexPath: 生成的 index.html 文件的路径，相对于 outputDir，默认为 index.html。
  • filenameHashing: 是否对生成的静态资源文件名进行哈希处理，以实现更好的缓存控制，默认为 true。
  • productionSourceMap: 是否在生产环境中生成 source map，默认为 true。
  • devServer: 开发服务器的配置选项，如端口、代理、HTTPS 等。
  • chainWebpack: 一个函数，用于修改内部的 webpack 配置。
  • configureWebpack: 一个对象或函数，用于配置 webpack。

以下是一个 vue.config.js 文件的示例：

javascript
// vue.config.js
module.exports = {
publicPath: '/my-app/',
outputDir: 'build',
assetsDir: 'static',
devServer: {
port: 8081,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap((options) => {
options.limit = 10240; // 将小于 10KB 的图片转换为 base64
return options;
});
},
};

四、Vue CLI 的插件系统

Vue CLI 拥有一个强大的插件系统，允许你通过安装插件来扩展 Vue CLI 的功能。Vue CLI 插件可以修改 webpack 配置、添加新的命令、生成新的文件、或修改项目结构。

4.1 安装插件

你可以使用 vue add 命令来安装 Vue CLI 插件：

bash
vue add @vue/cli-plugin-eslint

这里的 @vue/cli-plugin-eslint 是 ESLint 插件的名称。Vue CLI 会自动安装插件，并执行插件的安装脚本，以配置插件。

4.2 常用插件

以下是一些常用的 Vue CLI 插件：

  • @vue/cli-plugin-babel: 提供 Babel 支持。
  • @vue/cli-plugin-typescript: 提供 TypeScript 支持。
  • @vue/cli-plugin-eslint: 提供 ESLint 支持。
  • @vue/cli-plugin-router: 提供 Vue Router 支持。
  • @vue/cli-plugin-vuex: 提供 Vuex 支持。
  • @vue/cli-plugin-pwa: 提供 PWA 支持。
  • @vue/cli-plugin-unit-jest: 提供 Jest 单元测试支持。
  • @vue/cli-plugin-unit-mocha: 提供 Mocha 单元测试支持。
  • @vue/cli-plugin-e2e-cypress: 提供 Cypress E2E 测试支持。
  • @vue/cli-plugin-e2e-nightwatch: 提供 Nightwatch E2E 测试支持。

你可以在 Vue CLI 的官方文档中找到更多插件：https://cli.vuejs.org/

4.3 开发插件

如果你需要的功能没有现成的插件，你可以自己开发一个 Vue CLI 插件。Vue CLI 插件是一个 npm 包，它需要遵循一定的规范。

你可以在 Vue CLI 的官方文档中找到关于开发插件的详细信息：https://cli.vuejs.org/dev-guide/plugin-dev.html

五、Vue UI：Vue CLI 的图形化界面

Vue CLI 还提供了一个图形化界面 Vue UI，可以让你通过图形界面来创建、管理、和配置 Vue.js 项目。

你可以通过以下命令启动 Vue UI：

bash
vue ui

这个命令会在浏览器中打开 Vue UI 的界面。在 Vue UI 中，你可以：

  • 创建新项目
  • 导入现有项目
  • 管理项目依赖
  • 配置项目设置
  • 运行任务（如启动开发服务器、构建项目、运行测试）
  • 安装和管理插件
  • 查看项目分析报告

Vue UI 提供了一个更直观、更友好的方式来使用 Vue CLI，对于不熟悉命令行的开发者来说，Vue UI 是一个很好的选择。

六、总结

Vue CLI 是一个功能强大、易于使用的 Vue.js 项目脚手架工具。它提供了一套完整的项目构建流程，包括项目初始化、开发服务器、依赖管理、代码打包、代码检查、单元测试、以及部署等。Vue CLI 极大地简化了 Vue.js 项目的开发流程，让开发者可以专注于业务逻辑的实现，而不用过多地操心项目配置和构建细节。

通过本文，你应该对 Vue CLI 有了一个全面而深入的了解，并能够熟练地使用它来构建你的 Vue.js 项目。如果你想了解更多关于 Vue CLI 的信息，可以参考 Vue CLI 的官方文档：https://cli.vuejs.org/

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部