vue-cli（笔记）

1. runtime-compiler和runtime-only的区别

1.1 两个vue.js区别

runtime-compiler：
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

runtime-only：
new Vue({
  el: '#app',
  render: h => h(App)
})

compiler编译解析template过程
runtime-compiler ：
template会被解析 => ast(抽象语法树) => 然后编译成render函数 => 渲染成虚拟DOM（vdom）=> 真实dom(UI)
runtime-only：（1.性能更高；2.代码量更少）
render => vdom => UI

1.2 render函数

render: h => h(App){}
即：
render: function(h){
	return h(App)
}
	
render: function (createElement) {
    //1.普通用法:createElement('标签',{标签的属性},['']}
    // return createElement('h2',
    //   {class:"box"},
    //   ['hello world'],createElement('button',['按钮']))
    
    //2.传入组件对象
    return createElement(cpn)
  }

h就是一个传入的createElement函数，.vue文件的template是由vue-template-compiler解析。

2. vue-cli3

2.1 vue-cli 起步

vue-cli3与2版本区别：

• vue-cli3基于webpack4打造，vue-cli2是基于webpack3
• vue-cli3的设计原则是"0配置"，移除了配置文件，build和config等
• vue-cli3提供vue ui的命令，提供了可视化配置
• 移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹

创建cli3项目

vue create vuecli3test

2.2 vue-cli 配置

在创建vue-cli3项目的时候可以使用vue ui命令进入图形化界面创建项目，可以以可视化的方式创建项目，并配置项。