前言

最近在写一些通用的前端模版,使用到了Vue,但是我们知道Vue远不及Jquery的动效库多,所以我记录一下我在Vue中尝试使用Jquery插件的坑,和一些打包发布的坑。

使用到的技术栈

作为本次记录的项目使用到的技术栈有如下:

  1. Vue2.x (没用3的原因是鄙人太懒了,而且我是主后端的,溜了溜了,而且我是不会告诉你我是打着主后端的幌子偷懒的
  2. Vue-Cli
  3. Vue-Router
  4. 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;
}


本作品采用知识共享署名 4.0 国际许可协议进行许可。

如果可以的话,请给我钱请给我点赞赏,小小心意即可!

Last modification:October 13, 2020
If you think my article is useful to you, please feel free to appreciate