在vue/cli4 中全局使用jquery

最近想在vue里面使用jquery,上网搜了一下，大部分都是这种

在项目根目录下的build目录下找到webpack.base.conf.js文件

但vue-cli2之后就没有build文件夹了，还有说在每个页面都要导入的

import $ from 'jquery'

总之，说什么的都有，但都不能一针见血的解决问题。

最后在经历了两天的研究，结合了各种文章博客终于给解决了。分享给大家，希望能给你们一些帮助。

1. 安装jquery

npm install jquery

2. 在根目录下创建vue.config.js文件

const webpack = require('webpack')
 
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

3. 重新安装eslint

npm install eslint --save-dev

4. 配置eslint

这里需要自己配置一下，可以翻译+百度了解下说的都是什么意思，下面是我的配置供大家参考

cd ./node_modules/.bin/
eslint --init

5. 最关键的一步

需要把 根目录/node_modules/.bin 文件夹里的 .eslintrc.js 复制到根目录下，然后删除.bin里面的.eslintrc.js

之后就可以快乐的使用jquery了

6. 最后

编程不要在这种地方浪费时间，应该把精力放在代码上，这是我(菜鸡)结合各种博客文章总结出的办法，希望可以帮到你们，如果有大佬有更好的办法，我洗耳恭听。有问题可以发送评论，大家一起解决。

参考：

如何在vue-cli4中使用jquery

Module Error (from ./node_modules/eslint-loader/index.js):解决办法