vue 快速入门 系列 —— vue-cli 上

其他章节请看：

vue 快速入门 系列

Vue CLI 4.x 上

在 vue loader 一文中我们已经学会从零搭建一个简单的，用于单文件组件开发的脚手架；本篇，我们将全面学习 vue-cli 这个官方的、成熟的脚手架。

分上下两篇进行，上篇主要是”基础“，下篇主要是“开发”

Tip：介绍顺序尽可能保持与官方文档一致

介绍

vue-cli 是一个基于 vue.js 进行快速开发的完整系统。

让我们专注在撰写应用上，而不必花好几天去纠结配置的问题。

Vue CLI 有几个独立的部分：cli、cli 服务和cli 插件。

CLI

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

可以通过 vue create（下文将会详细介绍） 快速搭建一个新项目。

CLI 服务

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

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；

一个针对绝大部分应用优化过的内部的 webpack 配置；

项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

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/cli 这个包：

> npm install -g @vue/cli

你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确。请看示例：

// 验证是否安装成功 > vue Usage: vue <command> [options] Options: -h, --help output usage information ... // 查看版本 > vue --version @vue/cli 4.5.13 升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

若需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name] （试用）升级 Vue CLI 服务及插件 选项： -t, --to <version> 升级 <plugin-name> 到指定的版本 -f, --from <version> 跳过本地版本检测，默认插件是从此处指定的版本升级上来 -r, --registry <url> 使用指定的 registry 地址安装依赖 --all 升级所有的插件 --next 检查插件新版本时，包括 alpha/beta/rc 版本在内 -h, --help 输出帮助内容 基础 快速原型开发

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

> npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

vue serve

你所需要的仅仅是一个 App.vue 文件。

请看示例：

创建目录 demo，新建 App.vue 文件：

// demo/App.vue <template> <h1>Hello!</h1> </template>

然后在这个 App.vue 文件所在的目录下运行：

demo> vue serve App running at: - Local: :8080/ - Network: :8080/

访问 :8080/，页面显示 Hello，并有热模块替换功能。

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。

注：在此项目中写 less 提示需要 css-loader，编写的 postcss 也未生效 color: lch(53 105 40);—— lch 是明天的 css 语法。

vue build

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：

demo> vue build / Building for production... File Size Gzipped dist\js\chunk-vendors.86166fc4.js 65.95 KiB 23.71 KiB dist\js\app.6d4e2596.js 1.79 KiB 0.89 KiB

dist 目录中会生成 index.html，笔者在 dist 目录下运行静态文件服务器，在打开的页面中能看到 Hello!：

demo> cd dist dist> anywhere Running at :8000/ Also running at https://192.168.85.1:8001/

vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力

创建一个项目

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

> vue create vue-hello-world