[Vue warn]:?You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

1. Vue的編譯渲染過程

template --> ast --> render函數 --> VDom --> 真實DOM

• 先將template解析(parse)成抽象語法樹(ast)
• 將ast編譯(compiler)成render函數
• 將render函數渲染(render)成虛擬DOM
• 最后將虛擬DOM渲染成真實DOM

(1) runtime-compiler的步驟
template --> ast --> render函數 --> VDom --> 真實DOM

(2) runtime-only的步驟
render函數 --> VDom --> 真實DOM

vue中兩者的切換

/* 帶webpack顯性配置的 */
//webpack.config.js
//其實就是取別名，找到以 vue 結尾的，就去node_modules重新查一下路徑
module.exports = {resolve: {alias: {'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'}}
}/* webpack隱性配置的 */
//vue.config.js
//true 就是完整版的（即runtime-compiler）
module.exports = {runtimeCompiler: true  //ture: runtime-compiler  false: runtime-only
}