07：Vue CLI

三思原创大约 7 分钟

Vue CLI是一个官方发布的Vue.js项目脚手架工具，通过Vue CLI可以快速搭建Vue开发环境及对应的webpack配置。使用前需要安装Node和Webpack，初始化项目时可选择Vue CLI2或Vue CLI3版本，包括服务器运行项目和打包等操作。Vue CLI2有详细的目录结构和ESLint规范，同时需注意Runtime-Compiler和Runtime-only的区别。

Vue自学笔记7：Vue CLI

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。

(帮大家节省自己整理笔记的时间啦,剩下的时间一定要去上机实操,多多练习!!)

六、Vue CLI

1. Vue CLI的定义

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

2. Vue CLI的使用

2.1 Vue CLI使用前提 - Node

安装NodeJS 可以直接在官方网站中下载安装. 网址: http://open in new windownodejs.cn/download/open in new window
检测安装的版本默认情况下自动安装Node和NPM Node环境要求8.9以上或者更高版本
什么是NPM呢? NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
cnpm安装由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: /npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来安装模块了： cnpm install [name]

2.2 Vue CLI使用前提 - Webpack

Vue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。 Webpack的全局安装 npm install webpack -g

2.3 Vue CLI的使用

安装Vue脚手架

 npm install -g @vue/cli

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

脚手架初始化

Vue CLI2初始化项目

 vue init webpack 项目名称

Vue CLI3初始化项目

 vue create 项目名称(项目名称尽量不要使用中文)

服务器运行项目

 cli2是:  npm run dev
 cli3是:  npm run serve
 //具体什么命令看package.json中scripts的配置

打包

 npm run build
 //具体什么命令看package.json中scripts的配置

3. Vue CLI2详解

3.1 Vue CLI2初始化项目详解(重要)

 vue init webpack 项目名称

3.2 Vue CLI2目录结构详解(重要)

内容复杂,建议看视频:https://www.open in new windowbilibili.com/video/BV15open in new window741177Eh?p=93&vd_source=507e428c4f7818b4cbe408245176625eopen in new window

assets文件夹和static文件夹的区别:

assets里的文件编译过程中会被webpack处理理解为模块依赖，只支持相对路径的形式。assets放可能会变动的文件； static里的文件不会被webpack解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件。static放不会变动的文件。

3.3 ESLint规范

它真的很严格,你少一个空格它都会提示你有规范错误,所以是为强迫症准备的,我就不安装它了,不安装也不影响后期开发的(但也有公司需要用它)...

如果在Vue CLI初始化时你手滑安装了它,可以在config文件夹中index.js文件中找到useEslint变量,将它修改为false就行了

3.4 Runtime-Compiler和Runtime-only的区别

runtime-only: 代码中,不可以有任何的template
runtime-complier: 代码中,可以有template,因为有complier可以用于编译template
他俩最大的区别就在项目的main.js文件中:

简单总结

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

3.5 render和template

Runtime-Compiler和Runtime-only最大的区别就在项目的main.js文件中:

Vue程序运行过程:

使用runtime-compiler的步骤(v1) template -> ast -> render -> vdom(虚拟dom) -> UI(真实dom)
使用runtime-only的步骤(v2) (1.性能更高 2.下面的代码量更少) render -> vdom(虚拟dom) -> UI(真实dom)
那么.vue文件中的template是由谁处理的了? 是由vue-template-compiler render -> vdom -> UI

3.6 render 函数的使用

视频链接:https://www.open in new windowbilibili.com/video/BV15open in new window741177Eh?p=96&vd_source=507e428c4f7818b4cbe408245176625eopen in new window

普通用法:

高级用法:

传入组件cpn

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中

4.2 Vue CLI3初始化项目

 vue create 项目名称

然后会出现配置选项:

首先是选择默认配置,还是手动配置 (下面以选择手动配置为例,方便介绍配置选项)
选择需要的用的feature (按空格选择) (这些选项和vue cli2初始化配置时的选项很像)

4.2 Vue CLI3 目录结构详解

可以看出,相较于cli2,会发现没有build和config这两个配置webpack的文件夹

配置去哪里了？

在终端输入:

 vue ui

启动本地服务器,打开用户界面:

导入创建好的项目:

进入vue ui(图形化管理界面),可以管理该项目:

vue ui中可以查看项目的插件和依赖:

通过vue ui添加插件和依赖:

修改脚手架的一些配置:

通过vue ui运行项目:

4.3 自定义配置：起别名

自己创建一个vue.config.js文件(cli4中自带一个vue.config.js文件),可以自己定义配置