jQuery

引入 jQuery 并使用

安装

npm install jquery --save

.eslintrc.js文件配置

在env中配置 jQuery:true

配置文件:

module.exports = {
  root: true,
  env: {
    node: true,
    jQuery: true,
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

vue.config.js文件配置

webpack添加jQuery,配置文件:

const { defineConfig } = require('@vue/cli-service')
const CompressionPlugin = require('compression-webpack-plugin');
const { resolve } = require('path');
const webpack = require("webpack")

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      })
    ]
  },
  devServer: {
    allowedHosts: ['wl.wl_dev']
  },
  lintOnSave: false,
  transpileDependencies: [
    'quasar'
  ],

  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  productionSourceMap: false, 
  chainWebpack(config) {
    delete config.plugins['prefetch'];
    if(process.env.NODE_ENV !== 'development') {
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          test: /\.(js|css|html)$/,
          threshold: 10240,
        })
      )
    }

    config.module.rules.delete("svg")
    const svgRule = config.module.rule("svg-sprite-loader");
    svgRule.test(/\.svg$/).include.add(resolve('src/assets/svg')).end()
    svgRule.use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  },
})

添加内容:

const webpack = require("webpack")

configureWebpack: {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    })
  ]
},

在main.js文件中导入jquery

 import jquery from 'jquery'

简单示例

<template>
  <div class="test">
    <div class="click">点我</div>
  </div>
</template>
<script>
export default {
  name: "test",
  date() {
    return {};
  },
  mounted() {
    this.text();
  },
  methods: {
    text() {
      $(".click").click(function () {
        alert(1);
      });
    },
  },
};
</script>
<style >
</style>