這是在 vue.js 中導入 gsap 的正確方法（它有效，但它是“正確”的方法嗎？）

Question

我對 Vue.js 很陌生，並且在讓庫正常工作而沒有收到“錯誤 'X' is not defined no-undef”消息時遇到了一些問題。

在這種情況下，未定義“返回”（這是 GSAP 的一部分）我認為“定義”返回的唯一位置將在導入中。

這只是導入庫的方式嗎？ 我是否必須像這樣在導入中編寫每個未定義的部分？ 它有效，但似乎沒有必要。

 <template> <div id="mainTemplate"> <h2>This is the MainTemplaye.vue Component</h2> <div ref="box" class="box"></div> </div> </template> <script> import { TimelineLite, Back } from "gsap"; export default { name: "MainTemplate", mounted() { const { box } = this.$refs; const timeline = new TimelineLite(); timeline.to(box, 1, { x: 200, rotation: 90, ease: Back.easeInOut, }) timeline.to(box, 0.5, { background: 'green' },'-=0.5') }, }; </script> <style> .box { height: 60px; width: 60px; background: red; } </style>

Answer 1

我不確定您從哪里學習，但您使用的是 GSAP 的舊語法。 如果您使用 GSAP 的新語法， gsap在您的情況下，您不必導入gsap以外的任何內容：

import { gsap } from "gsap";

export default {
  name: "MainTemplate",
  mounted() {
    const { box } = this.$refs;
    const timeline = gsap.timeline();

    timeline.to(box, { duration: 1, x: 200, rotation: 90, ease: 'back.inOut' })
    timeline.to(box, { background: 'green' }, '-=0.5')
  },
};

開始學習的最佳位置是官方 GSAP 入門文章。