【人生苦短我学Vue】-【DAY10】-Vue CLI（脚手架）
大家好，我是被白菜拱的猪。
一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!
文章目录
一、写在前言
经过前两天的学习之后，我们是不是被webpack中繁杂的配置吓的惊慌失措，让我们不得不相信vue从入门到入土，利哥今天可以肯定的告诉你，不要怕！前面的那些配置我们可以不用做，那谁帮我们做呢？下面有请Vue CLI粉墨登场。
二、何为Vue CLI
（一）简单介绍
CLI 英文全称 Command Line Interface，命令行界面，我们称之为脚手架，我第一次在软件行业听见脚手架这个名词是在大一外面学java的时候，老师提了一嘴脚手架，当时十分不解，建筑行业里面盖房子时用到的东西怎么用在了软件开发上面呢，下面贴一下脚手架的照片。
学完webpack之后忽然就豁然开朗，觉得脚手架这个名字实在取的太秒了，妙哉妙哉。写程序跟盖房子的一样，尤其是针对巨大的工程项目，在建造之前，我们先把大体的框架搭建起来，这样我们就可以在框架的基础上来开发我们的程序，就比如我现在写的博客，先把纲要写出来，然后在去添加具体的内容。
学习同样如此，以前十分不了解为什么每一本参考资料的前面都要写提纲，要写思维导图，这不就是另一种形式的脚手架嘛。
（二）Vue CLI依赖
既然是替代webpack的功能，那么他就要去封装好webpack的功能，不需要我们自己动手，虽然说自己动手，丰衣足食，但是在开发中，我们配置文件配置大半天吧。
所以Vue CLI依赖webpack，我们前面讲过webpack又依赖Node.js。所以Vue CLI即依赖webpack又依赖Node，所以在使用脚手架之前，需要把这两个东西提交下好。
（三）安装Vue CLI
npm install -g @vue/cli
这是安装的最新版本，可能有些老的项目维护需要用到vue CLI2，我们不用在取另外安装，只需要在原有的基础上抽离即可，官网上都有介绍。
三、Vue CLI2
首先我们学习一下Vue CLI2，然后在去学习CLI3，看看他们之间有什么变化。
（一）创建工程过程详解
在按照官网步骤拉取CLI2后，我们就开始利用CLI2的语法创建一个project。(my-project是项目名，自定义取名)
vue init webpack my-project
最后创建完成之后如图所示，注意：工程名不能包含大写字母，在创建的过程中，有很多选项，让你是否要选择语法限制，是否选择测试，是否要安装路由，路由会放在下一章去讲，所以我没有选择安装。
另外是选择runtime-only还是选择runtime-complier，他们俩的区别下面会讲，明白了之后你就会知道要选择什么了。
（二）目录结构详解
这是利用脚手架2创建的目录结构
- build，config是webpack的相关配置文件，像上一篇讲的webpack.config.js等等文件就在里面
- node_modules是放依赖node的相关包
- src我们敲代码的地方
- static，在该文件下下的文件在我们发布打包的时候会原封不动的打包到dist文件夹下
- .babelrc是关于语言转化问题的配置，如前面讲的ES6转化为ES5
- .editorconfig 开发时的配置，比如使用什么编码格式，前面tab几个缩进
- .gitignore git上传到仓库忽视的文件，就是不需要上传到仓库的文件
- .postcssrc.js css相关转化的配置。
（三）runtime-only与runtime-complier的区别
在此之前，我们讲过runtime-only与runtim-complier的区别，我说only里面没有template，complier有，但为什么这样呢？我们没有仔细介绍。在了解他们区别之前，我们先要了解vue程序的运行过程。
1、Vue程序运行过程
ast（abstract syntax tree）生态语法树
runtime-complier：
template-》ast-》render-》virtual dom（虚拟dom）-》ui（真实的界面）
runtime-only：
render-》virtual dom-》ui
可以看出runtime-only是跳过了template和ast直接到了render函数，所以runtime-only代码量更少，体积更小。
为什么说使用vue体积变小了，原因就在此，虽然官网上说大多数用户more user使用，但我们得知他们区别之后以后就放心大胆的使用runtime-only吧。
我们还有一个疑问？那组件里面不是有template吗，那使用runtime-only之后不会出错吗，其实不会我们之前使用的vue-template-complier帮我们解决了这个问题。
2、render函数的使用
那下面我们详细介绍什么是render函数，以及render函数的写法。
runtime -complier中的main.js
runtime-only中的main.js
（1）createElement函数
h本质是一个内置的createElement函数，为什么缩写为h呢，
It comes from the term “hyperscript”, which is commonly used in many virtual-dom implementations. “Hyperscript” itself stands for “script that generates HTML structures” because HTML is the acronym for “hyper-text markup language”.
createElement()和hyperscirpt功能相似，都是生成dom结构的，所以createElement函数所以为h。
createElement函数有三个参数，如代码所示：
render: function (createElement) {
//1.creatElement('标签','{标签的属性}',['标签的内容'])
return createElement(
'h2',{class: 'box'},
['ljl is a handsome man',createElement('button',['按钮'])])
}
最后的效果为：
createElement函数也可以传入组件
效果跟下面的一样
需要注意的是组件里面的template已经被编译成render函数了
vue-template-complier
3、箭头函数的使用
（1）箭头函数的基本使用
//函数的普通写法
const aa= function () {
}
//函数的箭头写法
const bb = ( 参数列表)=>{
}
（2）箭头函数参数问题
分为多个参数和一个参数，一个参数的时候括号可以省略
//1.有两个参数的时候
const mul = (num1, num2)=>{
return num1 * num2
}
//2.有一个参数的时候，括号可以省略
const power = num1 =>{
return num1 * num1
}
（3）箭头函数结构数量问题
//1.函数有多行代码
const aaa = ()=>{
console.log('ljl is a good handsome boy');
console.log('coding handsome boy studies vue');
}
//2.函数只有一行代码，可有省略return
const bbb = (num1 ,num2)=> num1+num2
箭头函数用在什么地方？
一般把一个函数作为参数传到另一个函数中时使用箭头函数。
（4）箭头函数中this的使用
问题：箭头函数中的this是如何查找的？
回答：向外层定义域中一层一层的查找，知道有this的定义。
四、Vue CLI3（4）
（一）简单介绍
视频中最新的版本是脚手架3，那已是遥远的2018，如今2020已过大半，脚手架已升级到4，但是3与4相差不大。
他们的宗旨是零配置，这在官网上可以看到，
那么配置都去哪里了呢？我们可以使用vue ui可以看到，
更多的东西是通过server进行了管理。
那么我们开始用CLI4创建一个项目吧。
vue create hello-world
（二）目录结构
我们可以明显的看到，一大堆配置文件不翼而飞，真的是不翼而飞了吗，当然不是的，只是放在了我们看不到的地方。
下面看一下package.json文件
我们看到很多指令都跟vue-cli-service挂上了勾，这是service帮助我们管理了那些配置文件，我们只需大胆的开发就好。
（三）Vue UI
vue ui
我们下次修改配置文件，可以在ui界面修改即可，不得不说，这个界面做的深得我心，蛮好看的。
五、结束语
你知道的越多，知道的越少。
知识就如同这个圈，获取的越多，随着圈的增大，与外界接触的就越多，不知道就越多。
本文地址：https://blog.csdn.net/weixin_44226263/article/details/107529153