Vue CLI配置指南（1）

一、何为CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。
它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。
你也可以通过 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 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。

四、创建一个项目

运行以下命令来创建一个新项目：

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help

//语法
vue create [options] <app-name>

options：

项目	Value
-p, --preset <presetName>	忽略提示符并使用已保存的或远程的预设选项
-d, --default	忽略提示符并使用默认预设选项
-i, --inlinePreset <json>	忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>	在安装依赖时使用指定的 npm 客户端
-r, --registry <url>	在安装依赖时使用指定的 npm registry
-g, --git [message]	强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git	跳过 git 初始化
-f, --force	覆写目标目录可能存在的配置
-c, --clone	使用 git clone 获取远程预设选项
-x, --proxy	使用指定的代理创建项目
-b, --bare	创建项目时省略默认组件中的新手指导信息
-h, --help	输出使用帮助信息

五、Preset

~/.vuerc

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

示例：

{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    },
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  }
}

除了上述这些字段，你也可以为集成工具添加配置：

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如，当 “useConfigFiles”: true 的时候，configs 的值将会被合并到 vue.config.js 中。

远程 Preset

你可以通过发布 git repo 将一个 preset 分享给其他开发者。这个 repo 应该包含以下文件：

• preset.json: 包含 preset 数据的主要文件（必需）。
• generator.js: 一个可以注入或是修改项目中文件的Generator。
• prompts.js 一个可以通过命令行对话为 generator 收集选项的 prompts 文件。

发布 repo 后，你就可以在创建项目的时候通过 --preset 选项使用这个远程的 preset 了：

# 从 GitHub repo 使用 preset
vue create --preset username/repo my-project

GitLab 和 BitBucket 也是支持的。如果要从私有 repo 获取，请确保使用 --clone 选项：

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

加载文件系统中的 Preset

当开发一个远程 preset 的时候，你必须不厌其烦的向远程 repo 发出 push 进行反复测试。为了简化这个流程，你也可以直接在本地测试 preset。如果 --preset 选项的值是一个相对或绝对文件路径，或是以 .json 结尾，则 Vue CLI 会加载本地的 preset：

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

# 或者，直接使用当前工作目录下的 json 文件：
vue create --preset my-preset.json my-project

六、CLI插件

Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

在现有的项目中安装插件

如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令：

vue add eslint

这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器。

你可以向被安装的插件传递生成器选项 (这样做会跳过命令提示)：

vue add eslint --config airbnb --lintOn save

七、CLI 服务

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve

如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：

npx vue-cli-service serve

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

options：

–open 在服务器启动时打开浏览器
–copy 在服务器启动时将 URL 复制到剪切版
–mode 指定环境模式 (默认值：development)
–host 指定 host (默认值：0.0.0.0)
–port 指定 port (默认值：8080)
–https 使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

options：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

• –modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

• –target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

• –report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]

options：
 --mode    指定环境模式 (默认值：development)

你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。

查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：

npx vue-cli-service help

你也可以这样学习每个命令可用的选项：

npx vue-cli-service help [command]