Vue 的不同构建版本

Vue.js 可以分为两种版本：

  • 完整版 Vue.js ，包含运行时和compiler编译器的版本。
  • 非完整版 Vue.runtime.js ，只有运行时的版本。

image-20201203143816417.png

由于运行时版本没有 compiler ，打包体积更小，更推荐用户使用运行时版本。开发环境通常使用完整版开发，然后通过配置转成运行时版本提供用户使用。在 Vue 开发过程中，开发者可以通过 UMD 、CommonJS 、ES Module 三种版本来配置项目需要使用的 Vue.js 版本。

两种版本编译模板

  1. // 完整版
  2. new Vue({
  3.     template: '<div>{{ hi }}</div>'
  4. })
  6. // 非完整版
  7. new Vue({
  8.     render (h) {
  9.         // 源码提供一个 h 参数，类似于 Document.createElement()
  10.         return h('div', this.hi)
  11.     }
  12. })

实际开发过程中，我们通过打包工具将第一种模板的视图在构建时预编译成 JavaScript，得到第二种模板。

注意：如果两种版本用错，则会出现如下情况

  1. vue.js 错用成 vue.runtime.js，无法将 HTML 编译成视图。
  2. vue.runtime.js 错用成 vue.js，代码体积变大，因为 vue.js 有编译 HTML 的功能。

使用 codesandbox 写 Vue

最后，我们来看看在 codesandbox.io 进行 Vue 代码调试。

步骤一：首页点击按钮创建一个项目
image-20201203160322085.png

步骤二：选择 Vue（如果第一步选择 Vue 图标创建，忽略这一步）
image-20201203160515616.png

完成上述步骤就可以看到 Vue 的home页面了
image-20201203160619330.png