Vue脚手架的安装和分析

一、Vue脚手架的安装步骤

（一）全局安装Vue脚手架

Window + R，输入cmd进入电脑终端。

在终端中输入如下命令全局安装Vue脚手架：

npm install -g @vue/cli

下载过程中会警告，但不用关心这个。 

 

（二）创建项目目录

下载完Vue脚手架后一定要关闭终端。

再次打开终端后，跳转到指定目录下输入如下指令：

vue create 项目名

 

然后根据自己的需求选择Vue的版本，按上下键进行选择，选择好了敲下回车。

配置完成后会出现Successfully。 

（三）运行项目

进入项目根目录，在终端中输入如下代码：

npm run serve

输入完成敲下回车，就会生成两个链接。

我们按住Ctrl，点击http://localhost:8080/ 即可运行这个项目。 

 如果想要停止调试，就按两次Ctrl + C。

二、分析脚手架结构

（一）其他结构

红色框部分从上到下依次是：

git打包忽略文件配置项

babel ES6转ES5配置项

包版本控制器

包管理配置项

readme文档

Vue配置项

（二）src文件

1. main.js文件

main.js文件是所有文件的入口文件

2. App.vue文件

App.vue管理了所有的组件 

3. assets文件 

 assets文件用于存放所有的静态资源

4. components文件

components文件用于存放所有的vue组件。

（三）public文件

1. favicon.ico

网页的图标，可以自行替换

2. index.html

三、render函数 

1. 为什么使用render函数？

因为我们引入的Vue是一个残缺版的Vue，没有模板解析器。

下图中红线框柱的是完整版的Vue，其余版本全部都是残缺版的Vue。

2. 为什么默认引入的是残缺版的Vue？

Vue只要由两个部分组成，核心功能部分和模板解析器。其中模板解析器占了Vue的三分之一的体积，会导致打包后的文件体积过大，并且代码打包过后就不需要使用模板解析器了。

3. render函数的作用是什么？

main.js中的render:h=>h(App) 就等于如下代码：

  // render: h => h(App),
  render(createElement) {
    return createElement(App);
  }

render函数是一个函数，必须有一个返回值。

render函数的参数createElement也是一个函数，这个函数能够创建HTML元素。

注释部分其实就是将render函数写成了箭头函数，省略了{ } 和return，将createElement参数换为了h。