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

Question

我是Vue.js的新手，在没有得到"错误"X"未定义为无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以外的任何内容：

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的官方入门文章。