更新: 2019/05/30
更新: 2019/11/01 大致补充完了基础部分
文档: https://cli.vuejs.org/zh/
| 安装 |
npm install -g @vue/cli
# OR
yarn global add @vue/cli
确认是否成功安装
|
| 基础 |
| 快速原型开发 |
| 先安装必要组件 |
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 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 / 选项，可以编辑这个文件。
|
| 创建项目 |
● 选项
用法：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或直接修改代码 |
| 插件 |
| 在现有的项目中安装插件 |
|
| 项目本地的插件 |
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 [command]
|
| 缓存和并行处理
|
|
| Git Hook |
@vue/cli-service自动安装yorkie, 可在package.json的gitHooks字段指定
{
"gitHooks": {
"pre-commit": "lint-staged"
}
}
|
| 配置时无需 Eject |
|
|
| |
|
|
开发 |
| 浏览器兼容性 |
|
| html和静态资源 |
|
| css相关 |
|
| webpack相关 |
|
| 环境变量和模式 |
|
| 构建目标 |
|
| 部署 |
|
| |
|
