两个版本对应的文件名

完整版---->vue.js；vue.min.js（没有注释）
非完整版（RuntimeOnly）---->runtime.js；runtime.min.js（没有注释）
有无compiler(编译器）的区别，完整版的体积比非完整版的体积大30%-40%。

完整版可以通过compiler把视图上的HTML转化为DOM节点，完整版的视图可以写在HTML里面或者template选项里面；
非完整版中的HTML只是字符串，不能从HTML中获取"View"，
---->结合webpack引入vue-loader，就可把vue文件里的HTML转化为h函数，从而实现完整版的功能

template 和 render 怎么用

完整版
<template>
      <div id ="app" >
             {{n}}
            <button @click="add">+1 </button>
       </div>
</template>

非完整版
new Vue({
   render(h) {
    return h('div', [this.n, h("button", { on:{click:this.add}})])
    },
     data:{n:0},
     methods:{
            add(){ this.n +=1} 
            }
    })

如何用 codesandbox.io 写 Vue 代码

https://codesandbox.io/​codesandbox.io
选择项目为VUE即可

image.png