之前迷迷瞪瞪的,不知道这两个有啥区别,共同点是这两个版本都是无需构建,直接浏览器里跑。
单从引入的文件名看,全局构建版本是vue.global.js
,源码里是把vue的所有功能赋值给了Vue变量。
而ES模块构建版本文件名是vue.esm-browder.js
,源码里是用模块语法直接导出了vue的所有功能。
下面是两个例子,这两个例子都输出hello
// 全局构建版本
<div id="app">{{msg}}</div>
<script src="vue.global.js"></script>
<script>
const {createApp} = Vue; // 解构语法,把Vue里的createApp函数取出来,其实也可以直接Vue.createApp()来使用
createApp({
data() {
return {
msg: 'hello'
}
}
}).mount('#app');
</script>
// ES模块构建
<div id="app">{{msg}}</div>
<script type = "module"> // 因为用到模块语法,所以type="module"是必须的。
import {createApp} from "./vue.esm-browser.js"; // 模块语法导入createApp函数
createApp({
data() {
return {
msg: 'hello'
}
}
}).mount('#app');
</script>
后面功能好像没有区别。