Vue CLI的使用总结

推荐使用 npm 进行全局安装

npm i -g @vue/cli

使用 npm 进行升级

npm update -g @vue/cli

同时也可以针对内部的个别服务和插件进行单独升级。

安装之后可以发现仓库中管理了多个包，分别是 CLI、CLI 服务和 CLI 插件。

CLI

提供 vue create、vue serve、vue ui 等终端指令。

CLI服务

基于 webpack、webpack-dev-server 搭建，提供了一个优化过的适用于大部分应用的 webpack 配置。

CLI插件

提供可选功能的插件包，例如 Babel/Typescript 转译、ESLint、单元测试等。通过 @vue/cli-plugin- (内建插件)和 vue-cli-plugin- (社区插件实现区分) 的头部样式来区分。
运行 vue-cli-service 命令的时候，会自动加载解析所有插件。
插件可以在项目创建的时候添加，也可以在项目过程中添加，也可以生成一套供复用的 preset 设置。

指令 vue serve 和 vue build 可以针对单个 vue 后缀的文件进行快速原型开发，需要先安装一个全局性的扩展。

npm install -g @vue/cli-service-global

提供一个 test.vue 的文件，在当前目录下使用 vue build 和 vue serve 进行编译和启动。

vue serve test.vue

vue build test.vue

使用 vue create 创建一个全新的项目。

vue create hello-world

目前有三个配置选项选项，分别是使用 Vue2 默认配置 、Vue3 默认配置或者是手动配置。

选择手动配置时

选择手动配置之后会提示你给这套配置命名，preset 会保存在 home 下的 .vuerc 文件下面。

vue ui 可以打开图形化项目管理页面。
vue add 可以添加插件

vue add eslint

等价于

vue add @vue/cli-plugin-eslint

vue add apollo

等价于

vue add vue-cli-plugin-apollo

如果一个插件已经存在 跳过安装步骤 只调用生成器

vue invoke