【前端Vue】06 - VueCLI 脚手架

1. VueCLI 介绍

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

2. 使用 VueCLI 需要做的准备

2.1 安装 NodeJS

1. 下载地址。

2. 默认情况下自动安装Node和NPM。

2.2 安装符合要求的Node版本

1. Node 环境要求8.9 以上或者更高版本：

检测node的版本

2.3 什么是NPM呢?

1. NPM的全称是Node Package Manager。

2. 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

2.4 Vue CLI使用前提 - Webpack,需要 webpack的支持

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

2. Webpack的全局安装:

npm install webpack -g

3. VueCLI 的使用

3.1 安装VueCLI

1. 使用命令 :npm install -g @vue/cli 全局安装 Vue的脚手架。值得注意的是这种方式安装的脚手架是 VueCLI3，如果需要想按照Vue CLI2的方式进行初始化是不可以的。

3.2 VueCLI2 创建项目

1. 使用VueCLI2 创建一个项目:但是在创建之前需要拉取一个模板。npm install -g @vue/cli-init。

vue init webpack my-project

VueCLI2创建一个项目

3.2 VueCLI2 目录结构解析

VueCLI2目录结构解析

3.3 安装CLI错误和ESLint规范

1. VueCLI2创建的项目中如何关闭ESLint。

将此处的true改为false为关闭ESLint

3.4 runtime+compiler 和 runtime-only

两种创建方式的不同

在render函数中创建元素

在render函数中创建自定义组件

在.vue文件中的template在开发阶段被 vue-template-compiler已经编译为了一个render函数。

runtime+compiler

1. 在runtime-compiler模式下我们的main.js如下所示:

runtime+compiler模式下的main.js

2. 该模式下的渲染流程是:template->抽象语法树->render->vdom->ui。

runtime-only

1. 在runtime-only模式下我们的main.js如下所示:

在runtime-only模式下的main.js

2. 该模式下的渲染流程是:render->vdom->ui。

3. 该模式下性能高。

4. 在组件中是如何实现渲染的？ 答：在 .vue文件中由于有vue-template-compiler的支持，.vue文件在开发阶段就已经转换为了一个render函数。

App组件对象中的render函数

vue-template-compiler属于开发时依赖

3.5 执行 npm run build 的过程

执行 npm run build 的过程

3.6 执行 npm run dev 的过程

执行npm run dev的过程

4. VueCLI3 之后

4.1 VueCLI3 之后 和 VueCLI2 的区别 ?

1. vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3;

2. vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录;

3. vue-cli 3提供了 vue ui命令，提供了可视化配置，更加人性化;

4. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中。

4.2 使用 VueCLI3 创建项目

1. 使用VueCLI3 创建项目 :

vue create vuecli3test

创建的基本步骤

main.js入口文件对比

4.3 VueCLI3 之后的配置去哪里了？在 VueCLI3中提供了可视化的配置工具 VueUI。

1. 使用 vue ui 命令进入到可视化配置界面。

vue ui界面可视化

在可视化界面配置中修改 runtime+compiler 和 runtime-only

4.4 VueCLI3配置文件在哪里？

1. webpack.config.js文件中是一些默认的配置，引入了很多其他的配置：

VueCLI3之后webpack.config.js跑到这里来了

2. 如果一定需要修改默认的配置，需要在项目文件夹下创建一个 vue.config.js文件。用于修改默认配置。

module.exports = {

}

5. 箭头函数的基本使用

5.1 基本箭头函数的定义 :

// ES6中的箭头函数
    const fun = (params) => {
        // 函数体
        return params * 6;
    }

5.2 箭头函数中有一个参数，函数体中只有一行代码

    /**
   * 放入一个参数，如果函数体 只有 return 一行代码 还可以将 {}省略
     * @param num
     * @returns {number}
     */
const power = num => num * num; // 简化写法 

// 原始写法 

const power = (num )=> {
  return num * num;
};

5.3 箭头函数的this指向问题

1. 箭头函数的this引用的就是最近作用域中的this。

2. 问题: 箭头函数中的this是如何查找的呢？

3. 答案：向外层作用域中，一层层查找this，直到有this的定义。