这是在 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 入门文章。