11-vue-cli2、3

vue-cli2

创建

需要桥接

-npm install -g @vue/cli-init
-vue init webpack 项目名

cli2初始化的选项说明

目录结构详解

关于runtimeonly和runtimecompiler的区别

template -> ast -> render -> vdom -> UI
在vue程序运行过程中，如果有template，会将其parse(解析)转化为ast(abstract syntax tree抽象语法树)，然后通过render函数生成一颗virtual dom，再渲染到ui成为真实dom

在创建一个runtimecompiler的项目时
其中的main.js文件如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

runtimeonly的项目中main.js文件如下：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

两者差别：
runtimecompiler：

• 过程template -> ast -> render -> vdom -> UI

runtimeonly：

• render -> vdom -> UI
• 性能更高
• 代码量更少

runtime-only 更快的原因：

runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compiler那么main.js中就会出现template从而需要过程一导致增加了一个过程，同时增加了大小而 runtime-only 模式中不是没有写 template ，只是把 template 放在了.vue 的文件中了并有一个叫 vue-template-compiler的在开发依赖时将.vue文件中的 template 解析成 render 函数了因为是开发依赖，不在最后生产中，所以最后生产出来的运行的代码没有template。

vue-cli3

创建

	-vue create 项目名称

cli3初始化

在cli3中可以使用图形化界面
vue-cli官方文档