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初始化
扫描二维码关注公众号，回复：
12767175 查看本文章
