介紹一下 Vue 兩個版本的區(qū)別和使用方法：

1.兩個版本對應(yīng)的文件名

image.png

主要區(qū)別：

完整版有compiler，編譯器主要是將模板字符串編譯成JS渲染字符串，導(dǎo)致完整版體積過大。
非完整版沒有compiler，體積小，大約小30%-40%左右。視圖寫在render函數(shù)中，用h來創(chuàng)建標(biāo)簽。

bootcdn搜搜
完整版引入：vue.js，生產(chǎn)環(huán)境下引入vue.min.js
非完整版引入：vue.runtime.js生產(chǎn)環(huán)境下引入vue.runtime.min.js

視圖
完整版：
視圖寫在html里或者template選項里，由于有compiler（編譯器）的存在，完整版運(yùn)行時，用來創(chuàng)建Vue實例，渲染并處理虛擬DOM等代碼。
非完整版：

Vue({
  el: '#app',
  template: `<div>{{n}}</div>`,
  data(){
    return {
          n: 0
      }
   }
})

完整版運(yùn)行時：當(dāng)使用vue-loader 或vueify的時候，*.vue 文件內(nèi)部的模板會在構(gòu)建時預(yù)編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的，所以只用運(yùn)行時版本即可。

Vue( {
  name: 'App',
  render(h){
    return h('<div',this.n)
  },
  data(){
    return {
      n: 0
    }
  }
})

其他：
webpack引入：Vue完整版需要配置alias,Vue非完整版默認(rèn)使用
@vue/cli引入，完整版需要額外配置，默認(rèn)使用非完整版。
總結(jié)：
總是使用非完整版，然后配合使用vue-loader和vue文件。
理由：

保證用戶體驗，用戶下載的js體積更小，但只支持h函數(shù)
保證開發(fā)體驗，開發(fā)者可直接在vue文件里寫HTML標(biāo)簽，而不寫h函數(shù)
事情讓loader做，vue-loader把vue文件里的HTML轉(zhuǎn)換為h函數(shù)

template
完整版可以直接在HTML里面或者在template選項中直接寫代碼。它會自動解析
例如：

1.在index.jhtml中添加一個id為app的標(biāo)簽

<div id="app"></div>

2.接著添加script標(biāo)簽，引入完整版的js文件

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

3.然后在main.js里，直接把html代碼寫入template選項中

new Vue({
    el: '#app',
    template: `
       <div>{{n}}</div>
   `,
    data: {
        n: 0
    }
})

4.運(yùn)行Vue后，它會直接把n為0寫入到app標(biāo)簽中

render
運(yùn)行版，需要將HTML標(biāo)簽寫入render中，讓render來寫入html中
例如：
1.在index.html中添加一個id為app的標(biāo)簽

<div id="app"></div>

2.接著添加script標(biāo)簽，引入運(yùn)行版的js文件

<script scr="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"><script>

3.然后在main.js里，用render函數(shù)來創(chuàng)建標(biāo)簽

new Vue({
    el: '#app',
    render(h){
        return h('div', this.n)
    },
    data: {
        n: 0
    }
})

4.運(yùn)行vue后，效果和完整版一樣

1.不注冊，點create sandbox
2.點vue創(chuàng)建

image.png

3.到處點file=>export to zip

image.png