这是在 vue.js 中导入 gsap 的正确方法吗（它有效，但它是 "right" 方法吗？）

Question

我是 Vue.js 的新手，在没有收到“错误 'X' 未定义 no-undef”消息的情况下让库工作时遇到了一些问题。

在这种情况下，未定义的是 'Back'（它是 GSAP 的一部分）我认为“定义”Back 的唯一地方是在导入中。

这只是导入库的方式吗？我是否必须像这样在导入中编写每个未定义的部分？它有效，但似乎没有必要。

<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 以外的任何内容：

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')
  },
};

最好的学习起点是the official GSAP Getting Started article。

这是在 vue.js 中导入 gsap 的正确方法吗（它有效，但它是 "right" 方法吗？）

Is this the right way to import gsap in vue.js (it works but is it the "right" way?)

javascript

import

libraries

vue.js

gsap