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
            })
        }
    }
}