Vue.js 如何使用ESM导入Vue材料（网页包UMD）？

我有一个哈巴狗档案，里面有

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | import { JRGVue } from '/ui/index.js'
          | import VueMaterial from '/material/vue-material.js'
          | (()=>{
          |     const vue = new JRGVue(Vue);
          |     vue.app.use(VueMaterial);
          |     vue.app.$mount('#jg-app');
          | })();

我明白了

未捕获语法错误：请求的模块“/material/vue material.js”未提供名为“default”的导出

当我把它改成

import * as VueMaterial from '/material/vue-material.js'

我明白了

使用ESM导入Vue材质库的正确方法是什么

更新 它似乎确实适用于Vuetify

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | window.Vue = Vue;
    script(type="module")
          | import * as Vuetify from '/vuetify/vuetify.js';
          | import { JRGVue } from '/ui/index.js';
          | Vue.use(Vuetify);
          | const vue = new JRGVue(Vue);
          | vue.app.$mount('#jg-app');

更新

---

似乎不再使用最新版本。找到一个支持本机ESM的UI真的很好

如果导入引用库，正确的导入方法是：

import VueMaterial from 'vue-material';

并将应用程序与之捆绑

无法使用本机ES模块导入它（

）

可以导入构建为ES模块的软件包（例如

vue.esm.browser.js

用于

vue

），但

vue材料

没有ES6入口点

如果

/material/vue material.js

指的是

vue material/dist/vue material.js

，则在没有模块互操作的情况下，ES模块无法导入UMD模块

可以导入的ES模块是

vue material/src/index.js

，但无法直接导入，因为软件包使用的源文件不符合规范（.vue、.scss），需要生成

在运行时导入

vue material

UMD模块的一种方法是使用SystemJS进行模块互操作

---

此外，IIFE是模块范围内的反模式。

您不应该在导入路径的末尾追加

.js

扩展名，它应该是

/material/vue material

，因为是文件夹/路径中的

index.js

公开了与插件相关的所有模块。这个问题没有包含足够的细节，也没有足够的信息。什么是/material/vue-material.js？你知道这一点，其他人不会。是vue material dist文件夹中的UMD模块吗？@Terry我会小心的。非常确定ESM需要它，我已经注意到在新版本的node w/--实验模块中需要它，所以我想简单的答案是，您不能将材质UI与ESM一起使用。是否有实质性的实现（与vue集成）可以做到这一点？不，您可以将ESM与Webpack一起使用，或者使用SystemJS进行模块互操作，正如我提到的。您不能将其用于本机ESM。试试Vuetify，它有ESM入口点。由于Vue严重依赖自定义.Vue格式，因此将其与本机ESM一起使用是非常不切实际的，因为这将导致大多数第三方LIB出现相同的问题。

import VueMaterial from 'vue-material';