Vue JS NPM 模块导入组件

Posted 2023-02-16

【中文标题】Vue JS NPM 模块导入组件

【英文标题】：Vue JS NPM Module imported into Component

【发布时间】：2021-03-28 08:40:38

【问题描述】：

我正在尝试将一个 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');

【参考方案1】：

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

你试过了吗：

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