完整版vue
- 自带compiler编译器，可在HTML里写视图，也可在JS里用template选项写视图； 代码示例：
new vue({
data(){
return {n:0}
},
template:`
<div>{{n}}</div>
`,
})
- cdn引入，vue.j或者vue.min.js;
- webpack和@vue/cli引入需要额外配置
非完整版vue
- 没有编译器，体积比完整版小30%，但视图只能写在new vue()实例里的render(h){...}函数里 代码示例：
new vue({
data(){
return {n:0}
},
render(h){
return h('div',this.n)
},
})
- cdn引入，vue.runtime.js或者vue.runtime.min.js；
- 用webpack和@vue/cli引入，默认引入非完整版
vue-loader
vue-loader就是在使用非完整版vue的基础上，将vue文件转换成非完整版vue的render函数可读取的形式，其实@vue/cli引入vue文件就配置了vue-loader；其优点就在于既节省客户下载文件体积又方便开发者开发。
xxx.vue文件代码示例：
<template>
<div>
{{n}}
</div>
</template>
<script>
export default{
data(){
return {n:0}
}
}
</script>
<style>
body{
color:red;
}
</style>
使用codebox在线编辑vue
点击[codesandbox.io/]即可进入首页，
