Vue 有两个版本，分别是 完整版 和 只包含运行时版（非完整版）

区别

完整版：同时包含编译器（compiler）和运行时的版本。

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

只包含运行时版：除去编译器包含的其它一切的版本。

• 用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。

如下表所示

vue	完整版	只包含运行时版
特点	有compiler	没有compiler
视图	写在HTML里或者template选项	写在render函数里面，用h创建标签
cdn引入	vue.js（后缀）	vue.runtime.js（后缀）
webpack引入	需要配置alias	默认使用此版本
@vue/cli引入	需要额外配置	默认使用此版本

注：在生产环境下cdn引入时两个版本后缀是 vue.min.js 和 vue.runtime.min.js

选择

最佳实践：使用只包含运行时版本 （非完整版），用vue-loader和vue文件引入compiler

思路：

1. 保证用户体验，非完整版比完整版小30%，用户下载的JS文件更小，体验更好，但只支持 h 函数。
2. 保证开发体验，开发者可直接在vue文件里写HTML标签和template，而不写h函数
3. vue-loader可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h 函数

template 和 render 的用法

// 需要编译器(完整版中) 
new Vue({  
template: '<div>{{ hi }}</div>'  
})

// 不需要编译器（非完整版中）
new Vue({  
render (h) {  
return h('div', this.hi)  
}  
})

template 在 JS 和 vue 文件中的不同

• vue文件中

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

• JS 中

template : `
  <div id="app">      
    {{n}}
    <button @click="add">+1</button>   
  </div> 
`

在线使用 Vue

codesandbox.io 可在线写 Vue 的代码，不用任何本地的安装依赖。