概述
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 服务构建在 webpack 和 webpack-dev-server 之上。它包含
- 加载其他 CLI 插件的核心服务;
- 针对大多数应用程序优化的内部 webpack 配置;
- 项目内的
vue-cli-service
二进制文件,它带有基本的serve
、build
和inspect
命令。
如果您熟悉 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 插件。
插件可以作为项目创建过程的一部分包含在内,也可以稍后添加到项目中。它们还可以分组到可重用的预设中。我们将在 插件和预设 部分更深入地讨论这些内容。