vue.js与vue.runtime.js

267 阅读1分钟

在第一次安装vue,阅读文档的时候我们发现,它有的构建版本。以前使用jQ的时候,通常也会分为完整版和min版本,或者叫生产版本,生产版本一般会将很多的注释以及error都删除,以减小文件大小。那vue的生产版本与完整版有什么区别呢。

vue.js与vue.runtime.js

我们发现,它不仅有一个min版本,还有一个runtime版本。仅包含运行时的版本,是什么意思,可以深入的了解一下。

使用vue完整版构建一个vue实例

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

使用vue runtime构建一个vue实例

new Vue({
  render: h => h(App),
}).$mount('#app')

对比

vue完整版vue runtime版本
特点有compiler没有compiler
视图写在HTML或者写在template选项写在render函数里用h来创建标签
cdn引入vue.jsvue.runtime.js
webpack引入需要配置alias默认使用
@vue/cil引入需要额外配置默认使用

虽然runtime版本没有compiler,但是我们可以通过webpack的vue-loader和vue文件来实现编译。这样保证了生产环境的文件较小;而开发环境中我们在vue文件里写html,也很方便。

结尾

通过这些内容我们初步了解了vue.js与vue runtime,最后推荐一个在线codecodesandbox让我们写demo时方便,可以支持主流框架。