Vue CLI


Vue CLI 官网


什么是Vue CLI

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.

Vue CLI是一个官方发布 vue.js 项目脚手架

使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.。


Vue CLI使用前提

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。


Vue.js官方脚手架工具就使用了webpack模板

对所有的资源会压缩等优化操作

它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

Webpack的全局安装

1
npm install webpack -g

Vue CLI的安装

传送门

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包:

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

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

1
vue --version

上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

1
2
3
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI的使用

传送门

Vue CLI2初始化项目

1
vue init webpack my-project

Vue CLI3初始化项目

1
vue create my-project

Vue CLI2

Vue CLI2详解


目录结构详解


Vue CLI 中 Runtime-Compiler和Runtime-only的区别

在我们初始化vue项目的时候,会让我们选择 Runtime-Compiler 还是 Runtime-only 。
在这里插入图片描述

那我们就来看一下他们有什么区别

Runtime-Compiler:编译器版本。
Runtime-only:运行时版本。

如果你需要在客户端编译模板(例如,向 template选项传入一个字符串,或者需要将模板中的非DOM的HTML挂载到一个元素),你需要带有编译器的版本,因而需要完整构建版本。

1
2
3
4
5
6
7
8
9
10
11
// 这种情况需要编译器
new Vue({
template:`<div>{{message}}</div>`
})

// 这种情况不需要编译器
new Vue({
render(h){
return h('div',this.message)
}
})

在使用vue- loader或 verify时,*.vue文件中的模板会在构建时(build time)预编译pre-compile)为 Javascript。最终生成的 bundle中你不再需要编译器( compiler,因此可以直接使用只含有运行时的构建版本( runtime-only)。

由于只含有运行时构建版本 (runtime-only比完整构建版本(full- build轻量大约30%,你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本,则需要在打包器中配置别名:

由于运行时版本的构建比其全面版本的重量轻约30%,Runtime-only 性能更高,代码量更少,因此你可以随时使用它。如果你仍然希望使用完整版本,则需要在捆绑程序中配置别名。


总结

如果在之后的开发中,你依然使用 template ,就需要选择 Runtime-Compiler 。
如果在之后的开发中,使用的是 .vue 文件夹开发,那么可以选择 Runtime-only 。


Runtime-Compiler 和 Runtime-only

为什么存在这样的差异呢?

我们需要先理解Vue应用程序是如何运行起来的。

Vue中的模板如何最终渲染成真实DOM。

我们来看下面的一幅图。

Vue程序运行过程中

Runtime-Compiler 执行步骤

template –> ast –> render –> vdom –> UI

Runtime-only 执行步骤(性能更高,代码量更少)

render –> vdom –> UI

Runtime-only 在执行代码的时候,直接就到render 了,减少template --> ast --> render 的代码量,性能更高。


修改配置:webpack.base.conf.js起别名








Vue CLI3

认识Vue CLI3

vue-cli 3 与 2 版本有很大区别

vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3

vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录

vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化

移除了static文件夹,新增了public文件夹,并且index.html移动到public中


初始化项目:


目录结构详解



Vue CLI3配置

启动配置服务器:vue ui


之前有一大堆配置文件去哪里了?


自定义配置:起别名