Vue中插入jQuery插件

安装jQuery库

npm install jQuery

安装expose-loader

cnpm i expose-loader --save-dev  

所要使用插件的Vue文件导入jQuery和下载好的jQuery插件

import $ from "jQuery";//导入库

import "@/plugins/jquery.fireworks";//插件

mounted()中挂载，以下为例子，插件为fireworks

mounted() {
      console.log($(".night"));
       $(".night").fireworks({
      sound: false, // sound effect
      opacity: 0.9,
      width: "100%",
      height: "100%",
      backgroundColor:"red"
    });
  },

webpack配置文件

Vue3的话新增vue.config.js文件

const path = require("path");
const webpack = require("webpack");

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    lintOnSave: false,
    chainWebpack: (config) => {
        // 配置路径别名
        config.resolve.alias
            .set("@", resolve("./src"))
            .set("components", resolve("./src/components"))
            .set("views", resolve("./src/views"))
            .set("assets", resolve("./src/assets"))
            .set("jquery", resolve("./node_modules/jquery/src/jquery"));
        // 这个插件的配置如果有更好的写法希望路过大佬告知。我只知道这样能跑起来......但可能不规范
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"],
            }),
        ]
    }
};