【人生苦短我学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