之前迷迷瞪瞪的,不知道这两个有啥区别,共同点是这两个版本都是无需构建,直接浏览器里跑。

单从引入的文件名看,全局构建版本是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>

后面功能好像没有区别。

评论