浅析Vue完整版与非完整版的区别

82 阅读1分钟

一、两版本对应的文件名

完整版名称一般结尾为——/vue.js 或 /vue.min.js

运行时版(非完整版)——/vue.runtime.js 或 /vue.runtime.min.js

Snipaste_2022-07-05_11-59-00.png

26287254-6ff30b24532b74c1.png

最佳选择:总是使用非完整版,然后配合 vue-loader 和 vue 文件
思路:
1、保证用户体验,用户下载的JS文件体积更小,但只支持h函数
2、保证开发体验,开发者可直接在Vue文件里写HTML标签,而不写h函数
3、脏活累活让 loader 做,vue-loader 把vue文件里的html 转为 h 函数

二、template 和 render 怎么用

其中,如果要使用template的话就需要使用完整版的Vue

// 需要编译器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

三、三步用 codesandbox.io 写 Vue 代码

进入CodeSandbox: Online Code Editor and IDE for Rapid Web Development首页并点击打开在线编辑器

Snipaste_2022-07-05_12-09-47.png 点击创建新项目

Snipaste_2022-07-05_12-10-36.png

编辑完成后点击左上角选择File下的Export to ZIP 导出文件

Snipaste_2022-07-05_12-11-50.png