两个Vue版本的引入

• 我们可以到bootcdn官网搜索Vue找到使用自己Vue的版本号，然后引入根据需求引入完整版Vue如图也可以引入非完整版，复制script标签到html中。

两者的主要区别

• 在完整版中，因为有compiler编译器，所以可以将html里含有{{n}}占位符，v-for循环，v-if条件语句的这些变成html里真实的dom节点，并且代码体积较多。

<div id="app">
      {{n}}<!--main.js创建的Vue能直接拿到n-->
    </div>

new Vue({
    el:'#app',
    data:{
       n:0;//直接将html里的n替换成0
    }
})

• 在不完整版中，因为没有compiler编译器，不支持从html里获得视图，通过webpack的Vue-loader转化成类似h('div', this.hi)这种形式，而且不完整版的Vue更加独立，代码体积也会比完整版的少30%左右

new Vue({
  el:'#app',
  render (h) {//接收到Vue传给你的参数，Vue会自动的将template(就是html)翻译成h('div', this.hi)
    return h('div', this.n)
  }
  data:{
       n:0;//直接将html里的n替换成0
    }
})

用 codesandbox.io 写 Vue 代码

点击如下官方网站

• 点击Vue项目
• 点击左上角File->Export to ZIP导出文件压缩包即可