关于不同构建版本
-
完整版
vue.js
的视图是写在HTML里或template选项的,由于有 compiler(编译器)的存在,完整版运行时,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。 -
运行时版本
vue.runtime.js
,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
一般是配置: vue运行时+ vue-loader 等编译器的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
运行时runtime
版本相比完整版体积要小大约 30%,所以项目中,应该尽可能使用这个版本。
当然如果仍想使用完整版,则需要在打包工具里做相应的配置看官方怎么说
// 需要编译器
new Vue({
el: "#app",
template: `
<div @click="add">{{n}} <button>+1</button></div>
`,
data: {
n: 0
},
methods:{
add(){
this.n += 1
}
}
})
// 不需要编译器
new Vue({
render(h){
return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
},
data: {
n: 0
},
methods:{
add(){
this.n += 1
}
}
})
在线编辑器
- 在codesandbox上,可以很方便的新建编写vue项目
- 进入选择“Vue”
- 然后直接在
components
=>Helloworld
下面一系列CRM
操作, - 右侧就会随之更新视图
- 点击File下的Export to ZIP ,导出到你想要存储的文件夹
网友评论