在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中导入动画文件
//导入动画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
