Vue的两个版本Vue存在两个不同的版本，完整版和运行时版。从以上可看出，两者主要的差异在于是否含有编译器。使用CD

Vue存在两个不同的版本，完整版和运行时版。

 完整版：同时包含编译器和运行时的版本。
 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

从以上可看出，两者主要的差异在于是否含有编译器。

 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

使用的区别：

建立一个vue项目
- 使用完整版使用CDN引入vue.js。在index.html中写入<div id="app"> {{n}} </div>或使用template，要实现将{{n}}显示为具体的数据
```
new Vue({
  el: "#app",
  template:`<div id="app"> {{n}} </div>`,
  data: {
    n: 0
  }
})
```
- 使用运行时版使用CDN引入vue.runtime.js。不支持直接从html文件或template获取视图，需要用render()来创建
```
new Vue({
  el: "#app",
  render(h) {
    return h("div", this.n)
  },
  data: {
    n: 0
  }
```
其中，h为一个createElement创建元素的函数，通过jS创建节点加载到页面中。
两者区别总结

区别主要在于编译器。

编译器可以从HTML或template直接得到视图,有compiler编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点，后面再修改会直接修改DOM节点无需再编译一遍，但compiler比较复杂会占用一定体积。

而运行时版因为无编译器，体积较小，方便用户使用。
使用vue-loader

从以上可看出，其实完整版更适合在编写代码时使用，运行时版适合提供给用户使用。

为解决这一矛盾，使用vue-loader将.vue文件翻译成h构建方法，用户使用时加载运行时版vue即可。

缺点：使用vue-loader后，html页面进存在div#app，即template内容所挂在的元素，不利于SEO。

解决：在html页面里把title、description、keyword、h1、a等写好。

单文件组件

新建一个demo.vue文件

  //视图
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>

//视图之外其它选项
<srcipt>
export default{
data(){ //data为函数
  return {
      n:0
  }
},
methods:{ //methods为对象
  add(){
      this.n +=1
  }
}
}
</srcipt>

//CSS
<style scoped>
.red{
  color:red;
}
</style>

在main.js中引入

import demo from "./demo.vue"
new Vue({
  el: "#app",//渲染到app
  render(h) {
    return h(demo)
  }
})

使用codesandbox快速构建vue项目

使用codesanbox.io：codesandbox.io/
1. 建议不要登录。因为登录了只能创建50个免费项目了，不登录可以创建无数个。
2. 点击Craete Sandbox，选择vue
3. 左边是文件目录，右边是预览
4. 在File选项中选择Export to Zip, 以压缩包形式导出项目
总结

最佳使用方法：总是使用非完整版，然后配合使用vue-loader和vue文件
1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2. 保证开发体验，开发者可直接在vue文件里写html标签，而不写h函数
3. 使用vue-loader把vue文件里的html转化成h函数

Vue的两个版本

总结