运行时 + 编译器 vs. 仅运行时
Vue完整版 | Vue非完整版 | |
---|---|---|
cdn 引入名称 | vue.js | vue.runtime.js |
区别 | 有 compiler,体积大很多,功能更完整 | 没有 compiler,体积小 |
视图 | 写在 HTML 里或者写在 template 选项里 | 写在 render 函数里用 h 来创建标签 |
template 和 render
// 需要编译器
Vue.createApp({
template: '<div>{{ hi }}</div>'
})
// 不需要
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
})
当使用 vue-loader
时,*.vue
文件中的模板会在构建时预编译为 JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。
如何用 codesandbox.io 创建 Vue 项目
-
浏览器打开
codesandbox.io
,不需要登录 -
点击右上角
Create Sandbox
按钮 -
选择创建 Vue 项目
-
coding
-
点击左上角
File
可导出项目