VueCli 3.x踩坑记录，VueCli搭建脚手架下如何使用jQuery

前几天写的项目用的BootStrap4.0的框架，有一个功能，想要在登录后验证是否发布过违规内容，如果存在就弹出个Modal框。于是问题就来了——

弹出BootStrap的Modal框的函数$("#id").modal(),Vue脚手架中如何导入并使用jQuery？

我看了大部分点击量较多的博客，全都是vuecli2.x的做法，2.x可以在build文件夹下的webpack.base.conf.js中添加相应配置，使得vue支持第三方插件

而3.x移除了build文件夹，所有打包（webpack）相关配置全部在vue.config.js文件中，该文件中的配置会在打包时自动整合至webpack，所以2.x的做法有一点改变。

另外，如果没有vue.config.js文件，可以手动创建一个，放在根目录下，即与src平级。

---

2.x步骤如下：

1. npm install jquery 安装jquery
2. 配置webpack.base.conf.js

3. const webpack = require('webpack')
   //引入的其他模块...
   module.exports = {
       //其他配置...
       plugins : new webpack.ProvidePlugin({
           jQuery: "jquery",
           $: "jquery"
       })
   }

4. 需要用到的组件中导入jquery模块 import $ from 'jquery'
5. 如果是用的BootStrap的某些函数，那么必须在main.js导入jquery，似乎是因为BootStrap要求jquery必须是全局的。

3.x步骤如下：

1. npm install jquery 安装jquery
2. 配置vue.config.js(没有的话自己创建一个)

3. const webpack=require("webpack");
   module.exports = {
       pluginOptions: new webpack.ProvidePlugin({
           jQuery: "jquery",
           $: "jquery"
       })
   }

4. 需要用到的组件中导入jquery模块 import $ from 'jquery'
5. 如果是用的BootStrap的某些函数，那么必须在main.js导入jquery，似乎是因为BootStrap要求jquery必须是全局的。

---

可以看到区别仅在于配置文件的改变，坑就出在没好好读vuecli的文档，3.x文档其实写明了vue.config.js的各项配置，其中pluginOptions就是向第三方插件提供参数的属性。