Блог

Я совсем новичок в Vue.js и у меня были некоторые проблемы с получением библиотек для работы без получения сообщения «ошибка ‘X’ не определена no-undef».

В этом случае это «Back», который не определен (который является частью 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>  

Я не уверен, откуда вы учитесь, но вы используете старый синтаксис 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 Getting Started .