vue 点击添加一行_Vue系列：VueCLI配置

需要理解的知识

CLI2和CLI3的区别

• CLI2基于webpack3，CLI3基于webpack4。

• 0配置，移除config和build目录。

• 提供vue ui命令，支持图形化配置。

• 移除static文件夹，增加public文件夹，并将index.html放入。

runtime-compiler和runtime-only的区别

• 创建项目时可选build方式：Runtime+Compiler或Runtime-only。

• runtime-compiler解析过程：template -> ast -> render -> virtual dom -> 真实DOM(UI)

• runtime-only解析过程：render -> virtual dom -> 真实DOM(UI)

• compiler用于处理template换成render。

• runtime-only因为处理环节少，所以性能较高、代码量少。

需要掌握的知识

Vue CLI脚手架

Vue CLI构建项目

• CLI3构建项目时，app.vue使用的是Render写法。

• Render：默认传参createElement，该方法可以接受模板对象，根据模板对象生成ui。

• 使用runtime-only时，.vue文件中的template已经被vue-template-compiler解析(包含一个render函数)。

Vue CLI3查看配置方法

• vue ui

• 【node_modules目录】-【@vue目录】-【cli-service目录】

• 项目目录下创建vue.config.js配置文件(文件名固定)，可以添加需要修改的配置信息。

  module.exports = {
  //配置
  }

其他知识点

箭头函数

es6箭头函数写法

• 通常一个函数中包含另一个函数时，会使用箭头函数。

• 箭头函数中的this，是向上层查找this，直到找到为止。

• 箭头函数写法如下。

  //一个参数
  const sum = num1 =>{
  return num1 * num1
  }
  
  //两个参数
  const sum = (num1,num2) =>{
  return num1+num2
  }
  
  //返回值只有一行代码时
  const sum = (num1, num2) => num1 + num2