在用 vue-cli2 （vue init webpack project）创建vue项目的时候，终端会询问你是用 runtime-only 和 runtime+compiler 中哪一种方式搭建。那么这两种方式到底有什么区别呢？我们来简单看一下。
它们代码方面的区别主要在于，src目录下的 main.js 文件的不同。
下图对两种方式搭建的项目中 main.js 文件代码进行比较：
可以看到 runtime-compiler 是比较基本的一种写法，步骤也很清晰：在vue组件里面注册一个名为App的子组件，然后在vue实例的模板 template 中使用这个App子组件。由于 template 和 el 同时出现在vue实例内部，template中的代码即<App/>，会替换掉 el 所挂载的那部分代码。
而 runtime-onliy 则直接使用了一个叫 render 的函数，render是渲染的意思，h 其实是 createElement 函数的别名，这里 render 函数的结果也会替换掉 el 所挂载的那部分代码。
为什么代码都不一样，但是却都能成功编译呢？
我们还需要大概了解一下 template 在编译时候的一个变化过程：
template -> ast -> render -> vdom -> UI
- template 代码首先会解析成 ast（抽象语法树，abstract syntax tree）
- ast 编译成 render 函数
- render 函数变化成 vdom（虚拟dom，virtual dom）
- 最终 vdom 的内容更新渲染到 UI 上。
所以 ，
runtime-compiler 经历的是一个 template -> ast -> render -> vdom -> UI 的过程，
runtime-only直接使用了render函数，所以经历的是一个 render -> vdom -> UI 的过程。
由此可见，runtime-only 会省去一个 template -> ast -> render 的过程，也不再需要相关的loader插件，从而这种方法搭建的项目性能更高，代码也更少，项目大小也更小。
如有疏漏，欢迎指出，谢谢。