关于Vue的完整版与runtime版的区别

完整版

特点

• 同时包含编辑器和运行时的版本
• 可以在CDN引入

• 因为自带编辑器，所以体积相对runtime版来说更大
• 使用该版本，可以直接在template标签html标签中将视图渲染出来
• 引入webpack需要配置alias
• 引入vue-cli也需要额外配置

new Vue({
  template: '<div>{{ hi }}</div>'
})

runtime版本

特点

• 只包含运行时的版本，不自带编辑器
• 在CDN中引入

• 该版本体积较小
• 无法直接通过template/html将视图渲染出来，需要使用render中的h函数来构造节点
• webpack和vue-cli引入都默认使用此版本

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• 在实际开发中，由于h函数构造比较复杂，可以通过vue-loader将vue文件中的html标签转化为h函数。

如果错将vue.js引入为vue.runtime.js，html将无法渲染为视图

如果错将vue.runtime.js引入为vue.js，代码体积会变大

在线编辑创建vue实例

codesandbox

codesandbox通过codesandbox.io/ 访问，可以实现在线构建vue实例。

1. 通过网址进入网站，点击Start coding for free （不要注册登录，否则只能创建50个项目）

2. 点击create sandbox，然后点击vue

3. 然后可以直接通过旁边的文件夹选择文件进行代码编辑

4. 导出文件包