020 Vue 脚手架CLI的使用
[A] 脚手架CLI简介
1. 大型项目开发，一般都会使用到vue CLI来简化代码书写量，这是因为：
1. vue的形象项目开发时，我们需要考虑代码目录结构，项目结构和部署，预加载，代码单元测试等等
2. 如果所有代码都要手动书写，那工作量太大，此时需要结束vue CLI降低代码书写量
2. CLI俗称脚手架
1. CLI时Command-Line Interface，中文名为命令行界面，俗称脚手架
2. Vue CLI是一个官方发布的vue.js的项目脚手架
3. 使用vue-cli可以快速搭建Vue项目开发环境以及对应的webpack配置
3. CLI脚手架使用前提
1. 安装Nodejs和npm
2. 其中，nodejs环境要求8.9以上版本
4. CLI2的安装
1. 全局安装即可
npm install vue-cli -g
5. CLI3安装：
1. 全局安装即可
npm install @vue/cli -g
2.上面时脚手架3的安装，若还想使用CLI2，则还需安装桥接工具
npm install @vue/cli-init
[B] 脚手架CLI2的使用过程
1. 项目初始化
运行指令：
vue init webpack my_porject_a
// 会根据这个项目名称创建一个文件夹，所有创建的文件都放在这个文件夹下
// 文件名自定义，但不能有大写字母
// 在安装过程中会要求填写信息
Project name> my_cli_a
// 填写项目名称，不能有大写字母
Project description> a vue.js project
// 作者的信息，默认会从git中读取
Author> Carrey 137xxxx891@qq.com
// 作者名和邮箱，默认从git读取
Vue build> runtime + compiler
// 后面详解
Install vue-rounter> No
// 不安装路由，后面讲
Use ESLint to lint your code> No
// 不使用语法检查限制
Set up unit tests> No
// 不适用的单元测试
Setup e2e tests with Nightwatch>No
// end to end 测试，不需要
Should we run `npm install` fro your...
// 选择npm
2. CLI2项目初始化之后会生成一系列的文件
Carrey_a---------------------项目名
-build-------------------用来使用webpack打包时使用的build依赖
-config------------------用来做整个项目配置文件目录
-node_modules------------用来管理项目中使用的依赖，即需要使用的包
-src---------------------用来书写vue源代码
-assets--------------用来存放静态文件[重点]
-components----------用来书写vue组件[重点]
-router(可能没有)-----用来配置项目中路由[重点]
--App.vue------------项目中根组件[重点]
--main.js------------项目的主入口[重点]
-static------------------其他静态
--.babelrc---------------将ES6转换为ES5运行
--.editorconfig----------项目编辑配置
--.gitignore-------------git版本控制忽略文件
--.postceerc.js----------源码相关js
--index.html-------------项目主页
--package.json-----------项目信息
--package-lock.json------package.json的锁文件，为对应版本的
--README.md--------------说明信息
3. 运行项目
在当前项目的根目录中，即Carrey_a文件夹内部，运行：
npm run start
4. 访问项目
http://localhost:8080
[C] vue-cli2的项目开发方式
一切皆组件，一个组件无非就是js代码，html代码，css代码
1. vue-cli是在项目中开发一个个组件对应一个个的业务功能，日后可以将多个组件组合到一起形成一个前端系统
2. 开发时不再书写.html文件，编写的都是一个个的组件(.vue文件)，日后打包时 vu-cli会编译成html文件运行
[D] runtime-compiler和runtime-only
vue初始化的时候会有runtime-compiler和runtime-only两种模式，区别在于入口文件main.js
1. runtime-compiler
runtime-compiler中的main.js是先将App组件注册，然后再使用
即：
new Vue({
el: '#app',
template: '<App/>',
components: {App}
})
实现过程：template -> ast -> render -> virtual Dom -> 真实DOM(UI)
1. 当template模板传入时，vue实例将其保存在vm.options中
2. 将该template解析成一个ast(abstract syntax tree抽象语法树)
3. 抽象语法树被编译成render函数，利用render函数创建一个虚拟DOM树(virtual DOM)
4. 将虚拟DOM树渲染在界面(UI)上
2. runtime-only(1. 性能更高，2. 代码量更少)
runtime-only是将App组件直接通过render函数进行渲染
即：
new Vue({
el: '#app',
render: h => h(App)
})
实现过程：render -> virtual Dom -> 真实DOM(UI)
3. render函数,实际就是将传入的模板进行解析并替换index.html中的内容
new Vue({
el: '#app',
render: h => h(App)
})
这里的h函数实际上是createElement函数，即
render: function(createElement){
// 1. 普通用法createElement(标签, {标签的属性}, [标签里的内容])
return createElement('h2', {class: 'box'}, ['Carrey', createElement(...)]);
// 2. 传入组件对象
return createElement(cpn); // 这里的cpn为一个组件,
// 因此上面的 h => h(App)中，App也是一个组件，也会被渲染替换到页面中
// 在main.js中导入的App代码里虽然有template，但是App解析后在App对象中中并没有template，却多了一个render
// 因为这里App里的template已经被我们下载的vue-template-compiler插件编译过了
}
[E] CLI3项目初始化
1. 项目初始化指令
vue create 项目名
如： vue create carrey_b
2. please pick a preset(挑选预先配置)
default(babel, eslint) // 默认选择
Manually se features // 手动选择(推荐)
3. 选择需要的配置
// 空格选中或取消
() babel
() TypeScript
() Processive Web App (PWA) Support
() Router
() Vuex
() CSS Pre-processors
() Linter / Formatter
() Unit Testing
() E2E Testing
4. 选择配置文件存放位置
In dedicated config files // 存放在单独的配置文件中(推荐)
In package.json // 存放在package.json中
5. 是否为以后的项目创建自定义的配置
y // 保存——需要填写自定义文件名
n // 不保存
【注】如果某一天我想要删掉保存的自定义配置咋办
解决办法：
C:\Users\Administrator中的.vuerc的文件中，记事本打开，删除对应元素即可
6. 选择包管理工具
Npm
Yarn
7. 完成
[F] vue-cli3与vue-cli2有很大区别
1. vue-cli3时基于webpack4打造的，vue-cli2还是webpack3
2. vue-cli3的设计原则时"0配置"， 移除了配置文件根目录下的build和config等目录
3. vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化
4. 移除了static文件夹，新增了public文件夹，并且index.html移动到了public中
[G] vue-cli3目录详解
-carrey_b
-node_modules
-public // 相当于CLI2中的static目录
--favicon.ico
--index.html
-src // 存放源代码的地方，开发就在这里
-assets
-components
--App.vue
--main.js
--.browserslistrc // 浏览器相关支持配置
--.gitignore // git忽略的文件
--babel.config.js // ES语法转换
--package.json
--package.lock.json
--postcss.config.js // CSS相关配置
--README.md
[H] cli3查看和修改配置信息
三种方法可以实现：
1. vue ui
vue ui是vue-cli3种新增的一个可视化界面, 用于操作一些配置信息和配置文件
使用方法：
1. 在终端运行指令
vue ui
// 注：这个指令运行的路径没关系，任意路径下都可以运行
2. 查找到相关项目路径，打开项目文件夹
2. 查找配置信息文件
1. 配置文件存放地址：
node_modules/@vue/cli-service/webpack.config.js
2. 上述的配置文件中require了一个文件'./lib/Service'
node_modules\@vue\cli-service\lib\Service.js
3. 修改配置信息
1. 在当前项目的根目录下新建一个文件vue.config.js
注意：这个文件的文件名不可随意修改
2. 在文件中导出我们需要修改的配置
module.export = {
// 需要修改的配置信息
}
3. 脚手架3会自动将你所修改的配置文件与原来的配置文件进行合并
