两个版本对应的文件名与区别

我们使用Vue的时候，有两个不同的版本，它们分别是Vue完整版（vue.js）和Vue非完整版（vue.runtime.js）。这篇文章就来简单的介绍一下Vue两个版本的区别和使用方法。

完整版有compiler（[编译器]用来将模板字符串编译成为 JavaScript 渲染函数的代码），这导致完整版体积更大。

非完整版没有compiler的，所以体积更小，要比完整版体积小大概30%。

完整版的视图是写在HTML里或template选项的，由于有 compiler(编译器)的存在，完整版运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

非完整版的视图是写在render里的，是用h函数来创建标签。非完整版运行时：当使用 vue-loader 或 vueify 的时候，.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

// 不需要编译器
new Vue({
 render (h) {
   return h('div', this.hi)
 }
})
// 需要编译器
new Vue({
 template: '<div>{{ hi }}</div>'
})

cdn引入：完整版Vue 文件名为vue.js，只包含运行时版Vue（即非完整版Vue）文件名为vue.runtime.js，两者文件名不同，生成环境后缀为.min.js
从 webpack 引入,完整版需要配置 alias,非完整版是默认配置;
从 @vue/cli 引入,完整版需要额外配置,非完整版是默认配置。

总结

虽然有两个版本，但现在前端基本是不会用完整版的，平时使用默认都是代码体积小的非完整版，因为编译器的脏活交给vue-loader去做了。

选择非完整版的理由如下：

保证用户体验，用户下载的JS文件体积更小，但只支持h函数
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写 h函数
活让loader做，vue-loader 会把vue文件里的HTML转为h函数,这样我不用写太多麻烦的 h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验

template 和 render 怎么用

template：用 html 的方式渲染页面，template 可以写在 js 中也可以写在 html 中，完整版 Vue 可直接写 template

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

render：用 js 的方式渲染页面，可把 template 内的 html 翻译出来，不完整版 Vue 使用 render，用 h 构造出所有的元素

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

（1）打开 CodeSandBox.io ，创建账号或已有账号登录也可用GitHub账号登录（现已没有50个项目的限制）

（2）点击创建 Vue 项目

（3）存储到本地：完成 Vue 相关操作后，点击 File 下的 Export to ZIP ，可以导出 zip 压缩包到本地