Question

我有一个带有以下内容的哈巴狗文件...

#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');
          | })();

我知道

未捕获的SyntaxError：所请求的模块'/material/vue-material.js'不提供名为'default'的导出

当我将其更改为

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

我明白了

Uncaught TypeError: _vue2.default is not a constructor

使用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');

Answer 1

如果导入引用了vue-material库，则正确的导入方法是：

import VueMaterial from 'vue-material';

并将应用程序与其捆绑在一起。

无法通过本机ES模块（<script type="module">）导入。

可以导入作为ES模块构建的软件包（例如vue.esm.browser.js为vue的软件包，但是vue-material没有ES6入口点。

如果/material/vue-material.js指的是vue-material/dist/vue-material.js，则它是UMD模块，如果没有模块互操作，ES模块将无法导入它。

可以导入的ES模块是vue-material/src/index.js，但不能直接导入，因为该软件包使用了不符合规范（.vue，.scss）且需要构建的源文件。

在运行时导入vue-material UMD模块的一种方法是使用SystemJS进行模块互操作。

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

如何使用ESM导入Vue材料（Webpack UMD）？

更新

1 个答案: