Vue JS NPM模块已导入组件

Question

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

我以前看到有人建议它应该在我的mounted((钩子中，我正在做这件事，但我的导入语句(我在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';