前言：假設(shè)你用 vue-cli 創(chuàng)建了一個(gè) vue 項(xiàng)目根蟹，如下
index.html 中
<div id="app">
<h1>{{text}}</h1>
</div>
main.js 中
import Vue from 'vue'
new Vue({
el: "#app",
data: {
text: "hello"
}
})
當(dāng) npm run serve 啟動(dòng)項(xiàng)目打開頁面后双肤，你會(huì)發(fā)現(xiàn)報(bào)錯(cuò)了
[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.
(found in <Root>)
這是因?yàn)槟闶褂玫氖?vue 的 runtime-only 版本项阴，它不支持這樣寫鄙麦，使用 vue-cli 創(chuàng)建的項(xiàng)目氓英，默認(rèn)配置的就是 vue.runtime.js 版本
一规肴、Vue 不同的構(gòu)建版本
1. 完整版
同時(shí)包含編譯器(用來將模板字符串編譯成 js 渲染函數(shù)的代碼)和運(yùn)行時(shí)的版本
- vue.js
- vue.min.js(生產(chǎn)環(huán)境)
2. 只包含運(yùn)行時(shí)版(非完整版)
用來創(chuàng)建 Vue 實(shí)例捶闸，渲染并處理虛擬 DOM 等的代碼，基本上就是除去編譯器的其他一切
- vue.runtime.js
- vue.runtime.min.js(生產(chǎn)環(huán)境)
二拖刃、所以删壮，解決最開始的問題有3種辦法
1. 引入完整版
<div id="app">
<h1>{{text}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
text: "hello"
}
});
</script>
弊端：完整版相較于非完整版體積較大
2. 使用 render 函數(shù)來生成 VNode
new Vue({
el: '#app',
render(h){
return h('div', this.text)
},
data: {
text: "hello"
}
});
render 函數(shù)的參數(shù)是 createElement 函數(shù)，它會(huì)返回一個(gè) VNode 兑牡，它的簡寫是 h央碟，將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個(gè)通用慣例
弊端：必須使用 render 函數(shù)并傳入 h 參數(shù)構(gòu)造出所有的元素
3. 單文件組件
使用 webpack 的 vue-loader（vue-cli 已經(jīng)幫我們配置好了這個(gè)加載器）
App.vue文件如下：
<template>
<div id="#app">
<h1>{{text}}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
text: "hello"
}
}
}
</script>
因?yàn)?Vue 是虛擬 DOM ，所以單文件 App.vue 經(jīng)過 vue-loader 處理均函，由 vue-template-compiler 將 template 模板編譯生成 render 函數(shù)
優(yōu)點(diǎn)：是非完整版亿虽，體積小，并且不需要寫 render 函數(shù)
總結(jié)
以上我們對(duì) vue 不同的構(gòu)建版本有了一個(gè)了解苞也，也對(duì)使用 Vue 實(shí)例有了一些概念洛勉，
最完美的方法就是使用單文件組件，使用 vue-cli 創(chuàng)建的項(xiàng)目就是只包含運(yùn)行時(shí)版(非完整版)如迟，所以收毫，直接使用單文件組件是最方便快捷的
