⚠️ Vue CLI 处于维护模式!

对于新项目,现在建议使用 create-vue 来搭建基于 Vite 的项目。还可以参考 Vue 3 工具指南 获取最新建议。

概述

Vue CLI 是一个用于快速 Vue.js 开发的完整系统,它提供

  • 通过 @vue/cli 进行交互式项目脚手架。
  • 一个运行时依赖项 (@vue/cli-service),它
    • 可升级;
    • 构建在 webpack 之上,具有合理的默认值;
    • 可以通过项目内配置文件进行配置;
    • 可以通过插件扩展
  • 丰富的官方插件集合,集成了前端生态系统中的最佳工具。
  • 一个完整的图形用户界面,用于创建和管理 Vue.js 项目。

Vue CLI 旨在成为 Vue 生态系统的标准工具基线。它确保各种构建工具与合理的默认值协同工作,因此您可以专注于编写应用程序,而不是花费数天时间处理配置。同时,它仍然提供灵活性,可以调整每个工具的配置,而无需弹出。

系统组件

Vue CLI 有几个活动部分 - 如果你查看 源代码,你会发现它是一个包含多个单独发布的包的 monorepo。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,并在您的终端中提供 vue 命令。它提供通过 vue create 快速搭建新项目的能力。您还可以通过 vue ui 使用图形用户界面管理您的项目。我们将在指南的下一节中介绍它的功能。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发依赖项。它是一个 npm 包,安装在 @vue/cli 创建的每个项目中。

CLI 服务构建在 webpackwebpack-dev-server 之上。它包含

  • 加载其他 CLI 插件的核心服务;
  • 针对大多数应用程序优化的内部 webpack 配置;
  • 项目内的 vue-cli-service 二进制文件,它带有基本的 servebuildinspect 命令。

如果您熟悉 create-react-app@vue/cli-service 基本上等同于 react-scripts,尽管功能集不同。

关于 CLI 服务 的部分涵盖了它的详细用法。

CLI 插件

CLI 插件是 npm 包,为您的 Vue CLI 项目提供可选功能,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和端到端测试。很容易识别 Vue CLI 插件,因为它们的名称以 @vue/cli-plugin-(对于内置插件)或 vue-cli-plugin-(对于社区插件)开头。

当您在项目中运行 vue-cli-service 二进制文件时,它会自动解析并加载项目 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分包含在内,也可以稍后添加到项目中。它们还可以分组到可重用的预设中。我们将在 插件和预设 部分更深入地讨论这些内容。