Vue CLI指南

介绍

1. CLI (vue-cli/packages/@vue/cli)是一个全局安装的 npm 包,提供了终端里的vue命令，

• vue create
• vue ui
• vue serve
• 等等命令

2. CLI 服务 (vue-cli/packages/@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。它包含了：

• 加载其它 CLI 插件的核心服务
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

3. CLI 插件(vue-cli/packages/@vue/cli-plugin- xxx 内建插件 或 vue-cli-plugin- 社区插件)

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

安装

全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli

全局升级
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

创建一个项目

vue create

vue create hello-world

当选择完本次安装配置后，可以将本次配置保存为预设（preset） ::: tips ~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

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

使用图形化界面

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。构建项目后可以在可视化的界面进行build，插件安装，inspect等操作

插件和 Preset (opens new window)

vue-cli-service serve

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

 vue-cli-service serve --open    在服务器启动时打开浏览器

vue-cli-service build

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

 vue-cli-service build --report      生成 report.html 以帮助分析包内容
 vue-cli-service build --dest        指定输出目录 (默认值：dist)

vue-cli-service inspect

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

vue-cli-service inspect --mode development > inspect.js