# 基础
## 快速原型
你可以通过`vue serve`和`vue build`命令对单个`*.vue`文件快速原型开发，但这需要同Vue CLI一起被全局安装一个扩展：
~~~
npm install -g @vue/cli @vue/cli-service-global
# 或
yarn global add @vue/cli @vue/cli-service-global
~~~
`vue serve`的缺点是需要安装为全局依赖，这可能会导致不同机器不一致，所以这也权推荐为快速原型。
### **vue serv**
~~~
用法: serve [options] [entry]
开发模式下，零配置运行一个 .js 或 .vue 文件
选项:
-o, --open 打开浏览器
-c, --copy 本地url复制到剪贴板
-p, --port <port> 启动的本地服务器端口号 (默认: 8080 或 其它任何可以使用的端口)
-h, --help 输出用法信息
~~~
所有你所需要的只是一个`*.vue`文件：
~~~html
<template>
<h1>Hello!</h1>
</template>
~~~
然后这个目录下如果有默认的`App.vue`文件，则运行：
~~~
vue serve
~~~
`vue serve`使用同`vue create`创建项目的相同默认配置（webpack,babel,postcss和eslint）。它自动推断当前目录默认的入口文件 - 入口可以是`main.js`,`index.js`,`App.vue`,`app.vue`之一，你也可以特别指定一个入口文件：
~~~
vue serve MyComponent.vue
~~~
如果有必要，你也可以提供`index.html`,`package.json`，安装和使用本地依赖，或者甚至可以配置babel,postcss和eslint文件。
<br />
### **vue build**
~~~
用法: build [options] [entry]
生产环境下零配置构建一个.js 或 .vue 文件
选项:
-t, --target <target> 构建目标(app | lib | wc | wc-async, 默认: app)
-n, --name <name> 类库或web组件名称 (默认: 入口文件名)
-d, --dest <dir> 输入目录 (默认: dist)
-h, --help 输出用法帮助
~~~
你也可以使用`vue build`为开发环境构建一个生产包：
~~~
vue build MyComponent.vue
~~~
`vue build` 也提供了将组件构建为类库或类库构建为web组件的能力。参考[Build Targets](https://cli.vuejs.org/guide/build-targets.html)了解更多。
<br />
## 创建一个项目
### **vue create**
创建一个新的项目，执行：
~~~
vue create hello-world
~~~
>[warning] 警告
> 如果你在windows下使用minTTY Git Bash，交互式提示不会工作。你必须使用`winpty vue.cmd vue create hello-world`。如果你仍然想使用`vue create hello-world`语法，你可以在`~/.bashrc`文件中增加一行命令行别名。`alias vue='winpty vue.cmd'`，你需要重启当前git bash进程使baserc生效。
你会收到一个预设的提示，你即可以选择一个含有Babel+ESLint配置的预设，也可以根据需要选择“人工选择功能”。
默认的预设适合于快速原型项目，而人工选择则适合于生产项目。
如果你选择了人工选择，在最后一步也会提醒你将选择保存为预设，这样以后就可以直接使用该预设了。下一章我们将讨论插件和预设。
>[info] **~/.vuerc**
> 预设将会以JSON格式存储在用户主目录的`.vuerc`文件中。如果你想修改已保存的预设/选项，你可以编辑这个文件。
> 在项目创建过程中，也会提示你选择一个喜欢的管理包，或使用[淘宝npm镜像源](https://npm.taobao.org/)快速安装依赖。你的选择也会保存在`.vuerc`中。
> [info]需要注意的是这个.vuerc的路径总是。windows下据说生成到了C盘。我用的是mac电脑，生成的路径是：/Users/当前用户/.vuerc
你可以通过运行`vue create --help`来浏览`vue create`的所有选项：
~~~
用法: create [options] <app-name>
使用vue-cli-service创建一个新的项目
选项:
-p, --preset <预备名称> 直接选择一个已存储的或远程的预设。
-d, --default 跳过选择，使用默认预设
-i, --inlinePreset <json> 跳过选择使用行内json字符串作为预设
-m, --packageManager <command> 使用指定的npm客户端安装依赖
-r, --registry <url> 使用指定的npm源安装依赖
-g, --git [message|false] 强制/跳过 git初始化，任意指定初始提交信息
-n, --no-git 跳过git初始化
-f, --force 强制覆盖目标文件夹
-c, --clone 检测到远程预设时使用git clone
-x, --proxy 创建项目时使用指定代理
-b, --bare 脚手架工程不展示开始的介绍内容
-h, --help 输出命令的用法列表
~~~
### **使用GUI图形界面**
你也可以使用图形化界面来创建和管理项目，使用`vue ui`命令：
~~~
vue ui
~~~
上面的命令会打开浏览器展示一个图形化界面，引导你创建项目过程中的各种操作。
### **使用2.x模板(遗留)**
Vue CLI >=3 都使用 `vue`，不同于Vue CLI2的 `vue-cli`。如果你仍然想使用旧版本的`vue-init`功能，你可以安装一个全局的桥接：
~~~
npm install -g @vue/cli-init
# vue init 和 vue-cli@2.x一样运行
vue init webpack my-project
~~~
## 插件和预设
### **插件**
Vue CLI使用基于插件的结构。如果你仔细检查一个新创建项目的`package.json`代码你就会发现依赖都是以`@vue/cli-plugin-`开头。组件可以修改webpack内部配置和注入命令到`vue-cli-service`。大部分项目创建过程中展示的功能列表都是通过插件实现的。
插件的基础结构让Vue CLI具备适应性和可扩展性。如果你对插件开发感兴趣，参阅 [插件开发手册](https://cli.vuejs.org/dev-guide/plugin-dev.html)。
> 提示
> 你可以使用`vue ui`图形界面安装和管理插件。
### **已存在项目中安装插件**
每个CLI插件提供一个生成器（生成文件）和和一个运行时插件（调整webpack配置和注入命令）。当你使用`vue create`创建一个新项目时，根据你选择的功能就会预安装一些插件。如果你想在已存在项目中新增插件，你可以使用`vue add`命令：
~~~
vue add eslint
~~~
> 提示
> `vue add`是特别为安装和调用Vue CLI插件设计的。这并不意味着它可以替换普通的npm包。普通npm包应该仍然选择使用包管理器。
>[warning]推荐你在`vue add`前提交项目代码，因为该命令会调用插件文件生成器并潜在的改写再有文件。
命令会解析`@vue/eslint`至完整的包名`@vue/cli-plugin-eslint`，从npm包中安装，调用它的生成器。
~~~
# 同前面用法一样
vue add cli-plugin-eslint
~~~
没有`@vue`前缀，命令会解析至一个无范围的包。例如安装第三方插件`vue-cli-plugin-apollo`:
~~~
# 安装和调用`vue-cli-plugin-apollo
vue add apollo
~~~
你也可以在一个特定范围内安装插件。例如一个插件名为`@foo/vue-cli-plugin-bar`：
~~~
vue add @foo/bar
~~~
在安装插件时你也可以给生成器传递选项（这会跳过提示）：
~~~
vue add eslint --config airbnb --lintOn save
~~~
如果一个插件已经安装过了，你可以跳过安装并只使用`vue invoke`调用生成器。命令的参数和`vue add`一样。
> 提示
> 如果因为某些原因你的插件并不在你的项目中而在其他的`package.json`文件中，你可以设置项目的`vuePlugins.resoveFrom`选项来指定其它`package.json`的文件夹路径。
> 例如你的配置文件路径为：`.config/package.json`：
~~~
{
"vuePlugins": {
"resolveFrom": ".config"
}
}
~~~
### **项目局部插件**
如果在项目中需要访问插件的 API而又不需要全部插件功能，你可以在`package.json`中使用`vuePlugin.service`选项：
~~~
{
"vuePlugins": {
"service": ["my-commands.js"]
}
}
~~~
每个文件需要导出一个插件API作为第一个参数的函数。了解更多插件API，参考[插件开发手册](https://cli.vuejs.org/dev-guide/plugin-dev.html)。
你也可以添加像UI行为的插件，使用`vuePlugin.ui`命令：
~~~
{
"vuePlugins": {
"ui": ["my-ui.js"]
}
}
~~~
更多信息，阅读[UI plugin API](https://cli.vuejs.org/dev-guide/ui-api.html)。
### **预设**
预设就是包含预定义选项和插件的json对象，创建项目时不要再按提示一步步去选了。
预设在创建项目时选择保存在`.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": {...}
}
}
~~~
这些额外的配置会被合并到`package.json`或其它相应的配置文件中，依赖于`“userConfigFiles”:true`的值。例如：`"userConfig"`被配置为`true`，'configs.vue`的值将会被合并到`vue.config.js`。
### **预设插件版本控制**
你可以明确指定使用插件的版本号：
~~~
{
"plugins": {
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
// ... 插件的其它选项
}
}
}
~~~
注意这不是官方插件所必须的 - 当忽略时，Vue CLI会自动使用注册源中的可用最新版本。但是，**推荐为预设列表中每个第三方插件指定一个明确的版本号**。
### **允许插件提示**
每一个插件都会在创建项目过程中注入提示，但是如果你使用预设，将会跳过这些预设，这是因为Vue CLI假定所有选项都在预设中定义好了。
但有些场景下，你又希望预设只定义一些期望的必备插件，预留一些适应性让用户可以选择性的注入一些插件。
因为这些场景你可以指定一个插件选项`"prompts":true`来选择注入的插件：
~~~
{
"plugins": {
"@vue/cli-plugin-eslint": {
// 让用户选择他自己的 ESLint 配置
"prompts": true
}
}
}
~~~
### **远程预设**
你可以共享一个别的项目发布到git仓库的预设。仓库中可以包含以下文件：
* `preset.json`：包含预设的主要文件（必须）。
* `generator.js`：一个可以在项目中注入或修改文件的生成器。
* `prompts.js`：收集生成器选项的一个用户选择器。
一旦仓库发布，你就可以在创建项目过程中使用 `--preset`选项来指定这个远程预设：
~~~
# 使用 GitHub 的预设
vue create --preset username/repo my-project
~~~
仓库也支持GitLab和BitBuket。私有仓库记得要使用`--clone`选项：
~~~
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
# 克隆到自己的仓库里
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project
~~~
### ** 本地文件系统预设**
使用远程预设时，为了测试可能需要经常性的重新发布到仓库。简单点的流程是，你可以直接使用本地文件预设。Vue会根据`--preset`选项的相对或绝对路径来导入本地预设，或以`.json`结尾：
~~~
# ./my-prese应该是一个包含 preset.json的文件夹
vue create --preset ./my-preset my-project
# 或直接在指令中使用 json文件:
vue create --preset my-preset.json my-project
~~~
## CLI Service
### **使用命令方式**
在一个Vue CLI项目中，`@vue/cli-service`安装一个名为`vue-cli-service`的命令。你可以直接使用`vue-cli-service`在npm脚本中访问该命令，也可以在终端中使用`./node_modules/.bin/vue-cli-service`。
这也就是你在项目的`package.json`中看到的默认预设：
~~~
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
~~~
你还可使用npm或yarn使用这个脚本：
~~~
npm run serve
# OR
yarn serve
~~~
如果你可以使用[npx](https://github.com/npm/npx)（npm最新版应该已自带），你也可以直接这样调用命令：
~~~
npx vue-cli-service serve
~~~
>提示
你可以使用`vue ui`命令在图形化界面下调用该命令和额外功能选项。
这是一个GUI界面下webpack分析器：
### ** vue-cli-service serve**
~~~
用法: vue-cli-service serve [options] [entry]
选项:
--open 服务启动后打开浏览器
--copy 服务启动后将url拷贝到剪贴板
--mode 指定环境的模式 (默认：开发模式（develope）)
--host 指定主机地址 (默认: 0.0.0.0)
--port 指定端口(默认: 8080)
--https 使用https (默认: false)
--public 为HMR 客户端指定公网地址
--skip-plugins 运行是用逗号分隔需要跳过的插件列表
~~~
> **--copy**
> 某些平台上复制到剪切板可能不能工作。如果拷贝成功，会展示在本地开发地址后面。
`vue-cli-servie serve`命令启动一个开发服务器（以[webpack-dev-server](https://github.com/webpack/webpack-dev-server)为基础），并附带一个开箱即用的热重载（HRM）.
命令行标签另外，你也可以使用`vue.config.js`中devServer](https://cli.vuejs.org/config/#devserver)字段来配置开发服务器。
CLI命令中的`[entry]`用来定义入口文件（默认：`src/main.js`或TypeScript项目中中是`src/main.ts`），不是额外的入口文件。如果你在CLI中覆写了入口文件，`config.pages`中的入口文件不再有效，会导致错误。
### **vue-cli-service-build**
~~~
用法: vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认: 产品模式（production）)
--dest 指定一个输出目录(默认: dist)
--modern 面向现代浏览器构建应用，含自动回退功能
--no-unsafe-inline 无行内介绍脚本构建应用
--target app | lib | wc | wc-async (默认: app)
--formats 类库构建时输出格式列表 (default: commonjs,umd,umd-min)
--inline-vue 类库或WEB组件的最终构建版本中包含Vue模式。
--name 类库或WEB组件的名称。(默认: package.json 或 入口文件名)
--filename 输出文件名，只有类库时才可用。(默认:--name的值)
--no-clean 构建项目前不移除dist文件夹
--report 生成一个report.html协助分析构建内容
--report-json 生成report.json协助分析构建内容
--skip-plugins 用逗号分隔的本次运行需要跳过的插件列表
--watch 监控变更
~~~
`vue-cli-service-build`生成一个生产包到`dist`文件夹，含有压缩后的js/css/html，而且自动分割成块以便于更好的缓存。mainfest块会嵌入到html行中。
有一些可用的标签：
* `--modern`: 使用[Modern Mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode)构建你的应用，为支持的浏览器提供原生ES2015代码，并可以自动回退到旧版本。
* `--target`:允许你将项目中的任意组件构建为类库或WEB组件。查看[构建目标](https://cli.vuejs.org/guide/build-targets.html)了解更多。
* `--report`和`--report-json`会生成一个报告，依据你的构建统计，这可以协助你分析构建包中模块的大小。
### **vue-cli-service inspect**
~~~
用法: vue-cli-service inspect [options] [...paths]
选项:
--mode 指定环境模式 （默认:开发模式（ development））
~~~
你可以使用`vue-cli-service inspect`来审查一个Vue CLI项目中的webpack配置。查看[审查项目中webpack配置](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config)了解更多。
### **查看所有可用命令**
有一些插件会注入额外的命令到`vue-cli-service`，例如：`@vue/cli-plugin-eslint`注入`vue-cli-service lint`命令。你可以使用`vue-cli-service help`查看所有已注入的命令：
~~~
npx vue-cli-service help
~~~
你也可以学习所有命令可用选项：
~~~
npx vue-cli-service help [command]
~~~
### **跳过插件**
当执行一个命令时，你可以传递插件名到`--skip-plugins`选项来排除特定的插件：
~~~
npx vue-cli-service build --skip-plugins pwa
~~~
> 提示
> 这个选项在任何`vue-cli-service`命令中都可以使用，包括其他插件导入的定制插件。
跳过多个插件，用逗号分隔插件名即可：
~~~
npx vue-cli-service build --skip-plugins pwa,apollo
~~~
安装过程中插件名也可以一样的方式被解析，类似[这里](https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project)的描述：
~~~
# 这些都是等效的
npx vue-cli-service build --skip-plugins pwa
npx vue-cli-service build --skip-plugins @vue/pwa
npx vue-cli-service build --skip-plugins @vue/cli-plugin-pwa
~~~
### **缓存和并行**
* `cache-loader`: 默认Vue/Babel/TypeScript编译支持。文件被缓存在`node_modules/.cache` - 如果运行过程中编译出现问题，基本上试着删除缓存就可以解决。
* `thread-loader`：机器有多个CPU核心时可用。
### **Git勾子**
当安装时，`@vue/cli-service`也会安装[yorkie](https://github.com/yyx990803/yorkie)，它可以让你很轻松在`package.json`中用`gitHooks`指定git勾子。
~~~
{
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
~~~
>[warning]`yorkie` fork自`husky`，与后者不兼容。
### **无Ejecting配置**
通过`vue create`创建的项目是无须额外配置的。插件被设计为在大部分场景中互相协作，所有你需要做的就是在交互提示是选择你所需要的功能。
<br />
但是，我们理解需要提供任何可能的需求，而且项目的需求也是一直变化的。Vue CLI允许你配置几乎所有层面的工具，甚至不需要弹出（eject???)。查看 [配置参考](https://cli.vuejs.org/config/)了解更多细节。
