chaihongjun.me

Vue2引入jquery的方式需要经过以下几个配置项目。首先是通过包管理工具安装

npm install jquery

然后再在main.js文件里配置页面的全局引用：

import $ from "jquery";  //先导入
window.$ = window.jQuery = $; //挂载到页面的全局属性

最后，vue.config.js完成插件配置：

const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {  
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      }),
    ],
  },
});

以上jquery全局配置完成之后，可能部分jquery操作DOM的代码无效，那么就把那些代码写入对应组件的生命周期内，比如：

  // Sidebar.vue
  async mounted() {
    await this.fetchHeadlineArticles(this.number);
    // 页面侧栏顶部切换
    if ($(".widget-nav").length) {
      $(".widget-nav li").each(function (e) {
        $(this).hover(function () {
          console.log("Hover event triggered for index: " + e);
          $(this).addClass("active").siblings().removeClass("active");
          $(".widget-navcontent .item:eq(" + e + ")")
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
      });
    }
  },