vue-cli3.0引入jQuery使用animate.css动态特效

在vue-cli项目中如果直接引入jquery的话会报 “$” 错误，因为识别不了。所以需要一些其它步骤。

#安装jquery

npm install jquery --save

#在项目根目录 vue.config.js 文件中添加如下代码

没有这个文件就创建

const webpack = require("webpack")
module.exports = {
  configureWebpack: {

    plugins: [

      new webpack.ProvidePlugin({

        $: "jquery",

        jQuery: "jquery",

        "windows.jQuery": "jquery"

      })

    ]

  }

}

#在main.js中导入动画文件

animate.css文件地址

//导入动画css
import "./static/css/animate.min.css"

#现在我们已经导入了jquery和animate动画，现在我们创建一个animate.js文件，代码内容如下

//引入jquery
import $ from 'jquery'
$(function () {

  // header 组件中特效
  $('.title').mouseover(function () {
    // infinite 无限重复动画  animated 规定是一个动画  tada动画名称
    $('.title').addClass('animated rubberBand');
    //动画完后执行的函数
    $('.title').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
      //  window.console.log('hello world'); //动画完毕后才打印
      //移除动画
      $('.title').removeClass('animated rubberBand');
      //添加动画
      // modal_animate.addClass('animated rotateIn');
    });
  })

});

其中。title就是我们要监听的对象，这里我用的是mouseover事件，你也可以换其它的jquery事件，现在我们已经完成了99%。

#最后一步，在你监听对象的组件中导入该js文件

// 导入封装的动画特效
import "../static/js/animate.js"

大功告成！
参考文章:https://blog.csdn.net/kron_no/article/details/80970995