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

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

image.png

主要區(qū)別：

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

引入?yún)^(qū)別：

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

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

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

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

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文件绣夺。
理由：

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

2.template和render的使用方法

template
完整版可以直接在HTML里面或者在template選項(xiàng)中直接寫代碼。它會(huì)自動(dòng)解析
例如：

1.在index.jhtml中添加一個(gè)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選項(xiàng)中

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

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

render
運(yùn)行版蛾狗，需要將HTML標(biāo)簽寫入render中晋涣，讓render來寫入html中
例如：
1.在index.html中添加一個(gè)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后谢鹊，效果和完整版一樣

3.使用codesandbox快速生成Vue項(xiàng)目

codesandbox

搭建過程

1.不注冊算吩，點(diǎn)create sandbox
2.點(diǎn)vue創(chuàng)建

image.png

image.png