这是在 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')

  },

};