Vue JS NPM 模块导入组件

Question

我正在尝试将一个 npm 包导入到我的 vue.js 组件中。具体来说，我正在尝试将 ScrollMagic 导入到我的项目中，但我发现它是未定义的。

我之前看到有人建议它应该在我的 mount() 钩子中，我正在这样做，但是我的 import 语句（我在 main.js 和 components 标记中都尝试过，但都返回了未定义的变量。任何方向将不胜感激。

我的组件的脚本：

<script>
import { ScrollMagic } from 'scrollmagic';

export default {
  name: 'Scroller',
  mounted() {
    console.log(ScrollMagic);
  },
};
</script>

在我的 main.js 中

import Vue from 'vue';
/*
IMPORT STATEMENTS FOR MODULES GO HERE
*/
import sm from 'scrollmagic';
import gsap from 'gsap';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';

Vue.config.productionTip = false;
/*
Usage statement
*/
Vue.use(sm);
Vue.use(gsap);

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

Answer 1

也许 scrollmagic 包没有导出变量或函数ScrollMagic，所以它一直未定义？

你试过了吗：

import * as ScrollMagic from 'scrollmagic';
// OR
import ScrollMagic from 'scrollmagic';