这是在 vue.js 中导入 gsap 的正确方法吗（它可以工作，但这是“正确”的方法吗？）

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