[WIP]Vue CLI

更新: 2019/05/30

更新: 2019/11/01 大致补充完了基础部分

文档: https://cli.vuejs.org/zh/

 安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

确认是否成功安装

vue --version

基础

 快速原型开发

先安装必要组件

npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global

 vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器

Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

entry	自动推导(main.js/index.js/App.vue/app.vue)
	如果需要，你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint

例:

vue serve App.vue

 vue build 

Usage: build [options] [entry]

在生产环境模式下零配置构建一个 .js 或 .vue 文件

Options:

  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

也可以把组件构建成库或者web component, 详见 https://cli.vuejs.org/zh/guide/build-targets.html

 创建一个项目

~/.vuerc	被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。 如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
创建项目	vue create 项目名 ● 选项 用法：create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项： -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 输出使用帮助信息
使用图形界面	vue ui

 插件和预设配置

 管理项目设置

 vue ui或直接修改代码

 插件

在现有的项目中安装插件	vue add 插件名
项目本地的插件	vuePlugins.service vuePlugins.ui # TODO: fill here

 Preset

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

~/.vuerc

# TODO: fill here

 CLI服务

 使用命令

访问: npm scripts里vue-cli-service或 ./node_modules/.bin/vue-cli-service

 @vue/cli-service 创建了 vue-cli-service 命令

 访问方法

npm/yarn scripts	vue-cli-service 访问用 npm run / yarn run
直接访问	./node_modules/.bin/vue-cli-service

 vue-cli-service serve

启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载

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

选项：

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

 vue-cli-service build

在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。

它的 chunk manifest 会内联在 HTML 里。

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

选项：

  --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 inspect

查看所有设置

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

选项：

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

 查看所有的可用命令

查看所有的可用命令

vue-cli-service help

查看命令可用的选项

vue-cli-service help [command]

 缓存和并行处理

• cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

• thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

 Git Hook

@vue/cli-service自动安装yorkie, 可在package.json的gitHooks字段指定

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

 配置时无需 Eject

开发  

 浏览器兼容性

 html和静态资源 

 css相关

 webpack相关

 环境变量和模式

 构建目标

 部署