vue-cli3引入jquery后怎么用jquery插件？

Question

先说一下，jquery.ripples.js 就是要引的第三方插件。

我的步骤：
引入jquery库，在 package.json 的 dependencies 属性下添加了 "jquery": "^3.5.1"
下载jQuery第三方插件 jquery.ripples.js 放在 src/utils 包下面
新建 vue.config.js 文件，内容如下：

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'utils': '@utils',
        'ripples': 'src/utils/jquery.ripples.js'
      }
    },
    externals: {
      "ripples": "ripples"
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows:jQuery": "jquery"
      })
    ]
  }
}

在 index.vue 中添加代码：

import $ from 'jquery'

export default {
    methods: {
        test () {
            $('.headline').ripples({
              resolution: 512,
              dropRadius: 20,
              perturbance: 0.04
            })
        }
    }
}

执行的时候 $('.headline').ripples( 这里报错.

[Vue warn]: Error in mounted hook: "TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).ripples is not a function"

？？？？
请问，vue-cli3中，引jquery插件怎么做，如何实现

Answer 1

ripples作为插件，必须要引入才能使用，加入代码：require('ripples'), 如下试试

import $ from 'jquery'
require('ripples')

export default {
    methods: {
        test () {
            $('.headline').ripples({
              resolution: 512,
              dropRadius: 20,
              perturbance: 0.04
            })
        }
    }
}

Answer 2

1. 使用ProvidePlugin自动加载模块，就不用在import $ from 'jquery'了，直接用
2. 建议你仔细看看externals和resolve.alias的用法。你的报错这种情况显然是jquery.ripples.js没引入进去，你在用插件之前可以先搜下，其实有这个npm包的jquery.ripples

建议：用了vue就不要再用jquery了，大多时候你只需要操作数据就行了，不必操作dom，如果你想要什么效果自己写不了的去搜下

Answer 3

用vue不香吗？还要用jq,vue要操作dom节点可以通过ref啊