在第一次安装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.js | vue.runtime.js |
| webpack引入 | 需要配置alias | 默认使用 |
| @vue/cil引入 | 需要额外配置 | 默认使用 |
虽然runtime版本没有compiler,但是我们可以通过webpack的vue-loader和vue文件来实现编译。这样保证了生产环境的文件较小;而开发环境中我们在vue文件里写html,也很方便。
结尾
通过这些内容我们初步了解了vue.js与vue runtime,最后推荐一个在线codecodesandbox让我们写demo时方便,可以支持主流框架。