vue-cli Webpack项目中Greensock插件的使用方法(vue.js)

Question

我已经使用 vue-cli webpack 建立了一个 vue.js 项目。我想在我的项目中使用 Greensock 动画插件，所以我运行

npm install greensock --save

并且已安装。

在 main.js 文件中我添加了

import { TweenMax } from "greensock"

我不知道这是否使 Greensock 插件可用，因为我在组件文件 Tweenmax.to ... 处遇到语法错误

export default {
  name: 'HelloWorld',
  el: '.hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  method: {
    TweenMax.to(el, 2, {opacity: 0})
  }
}

我没有找到在 vue.js 项目中使用 Greensock 的文档，所以我希望能得到一些帮助。

Answer 1

您只需要做两处更改：

修正你方法中的错字，method 应该是 methods
在您的方法中，您应该定义一个函数来执行您的逻辑

方法：{ TweenMax.to(el, 2, {不透明度: 0}) }

将是：

 methods: {
    myTween(){
      ///...put here your ui logic
    }
  }

祝一切顺利

vue-cli Webpack项目中Greensock插件的使用方法(vue.js)

How to use Greensock plugin in vue-cli Webpack project (vue.js)

javascript

webpack

vue.js

gsap