前言
最近在写一些通用的前端模版，使用到了Vue，但是我们知道Vue远不及Jquery的动效库多，所以我记录一下我在Vue中尝试使用Jquery插件的坑，和一些打包发布的坑。
使用到的技术栈
作为本次记录的项目使用到的技术栈有如下：
- Vue2.x （
没用3的原因是鄙人太懒了，而且我是主后端的，溜了溜了，而且我是不会告诉你我是打着主后端的幌子偷懒的） - Vue-Cli
- Vue-Router
- Element
正文
问题产生的原因
我想要实现一个由底向上的气泡效果，如果自己用原生实现的话，就要用Javascript来操作canvas，总之，秉承着有轮子就用轮子的思想，就找到了一个Jquery插件，那么问题来了，如何将Jquery和Vue整合到一起呢？
解决方法
那么，首先我们就需要通过npm来将Jquery引入到我们本地项目中
npm install jquery@xxx //xxx为版本号由于我的项目是vue cli 4.x创建的，所以我们需要在项目的根目录下（非src目录）创建一个名为vue.config.js的文件
let webpack = require('webpack');
module.exports = {
configureWebpack:{
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
]
}
}我们输入以上内容，之后保存。
然后这里有个坑来了，由于eslint的检测机制，所以我们需要配置一下我们的EsLint，在项目里打开package.json文件
"eslintConfig": {
"root": true,
"env": {
"node": true,
"jquery": true
}在eslintConfig节点下添加jquery。
现在我们在main.js中引入我们的jQuery。
/*引入Jq*/
import 'jquery'
再将我们需要用到的插件压缩为min版，并将其移动到src下的asset目录中的js文件夹中
我们就可以在我们需要的vue模板中绑定元素了。
mounted() {
$('#babbleBack').circleMagic({
elem: '#babbleBack',
radius: 10,
densety: .2,
color: 'rgba(255,255,255, .4)',
clearOffset: .8
});
}测试效果
在这里我已经将一个初版效果放到我的测试服务器上面了，大家可以访问看一看效果。
值得一提的部署坑
我将项目部署到服务器的过程中也遇到了一些坑，总结如下，首先由vue-cli构建的项目如果事先勾选了router插件，那么它默认的模式为history，这个就将之前的vue链接上的/#/去掉了，同样的这也需要后端服务器的支持，如果部署在Nginx上，我们需要更改一下Nginx的规则，在Vue-router的官方文档上也给出了一些后端服务器的解决方案。
以下针对于Nginx的配置
location / {
try_files $uri $uri/ /index.html;
}
8 comments
看了你的文章，觉得非常不错…想与贵站互相友情链接
建站知道网-http://wozhidaole.com.cn
如果同意的话，回复一下后互相上链接！
名称：建站知道网
本站网址: http://wozhidaole.com.cn/
本站描述: | 新老站长都喜欢的技术性优秀网站！
已添加
已回
况且我也不是主的前端
有这个需求而已，有特效库的轮子，我不可能为了使用vue而重新用canvas造一个轮子，对于jquery肯定不是用来操作dom节点和数据的。
好的吧
|´・ω・)ノ 我都好久没用jq了 感觉都要忘了
哈哈，你们两个互相学习吧，研究一起去了。