vue项目全局引入jquery

1、全局安装jquery

安装命令：

npm install jquery --save

2、vue-cli3项目没有webpack.base.conf.js文件

根目录新建vue.config.js文件

输入以下代码

// vue.config.js
const webpack = require("webpack");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: (config) => {
    //路径配置
    config.resolve.alias
      .set("assets", resolve("src/assets"))
      .set("styles", resolve("src/assets/styles"));
  },

  // webpack-dev-server 相关配置
  devServer: {
    // 调试端口
    // port: 8989
  },
  //其他配置....
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      }),
    ],
  },
};

3、根目录新建.eslintrc.js文件

输入以下代码

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-undef': 'off',
    'vue/no-unused-vars': 'off',
    'vue/require-v-for-key': 'off',
    'no-unused-vars': 'off',
    'vue/no-unused-components': 'off'
  },
  parserOptions: {
      parser: 'babel-eslint'
  }
}

4、main.js中全局引入

import $ from "jquery";
window.jQuery = $;
window.$ = $;

项目中就可以随意使用jquery代码了！