如何在 vue-cli Webpack 项目（vue.js）中使用 Greensock 插件答案

【问题标题】：How to use Greensock plugin in vue-cli Webpack project (vue.js)如何在 vue-cli Webpack 项目（vue.js）中使用 Greensock 插件
【发布时间】：2017-11-27 06:26:46
【问题描述】：

我已经使用 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 的文档，因此我将不胜感激。

【问题讨论】：

method 应该是方法，然后你需要从一个方法包装你的库调用：myMethod(){TweenMax ecc ecc ecc
您的观察是正确的。我通过包装一个方法让它工作。而且，是的，我也有一个错字。如果您可以将其发布为答案，我很乐意选择并关闭该主题。

标签： javascript webpack vue.js gsap

【解决方案1】：

你只需要做出两个改变：

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

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

将是：

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

一切顺利

【讨论】：