vue中使用bootstrap和jQuery

在vue项目中，有的时候对于一些操作需要用到jQuery或者在项目中使用bootstrap时，需要做如下准备：

一、在项目中使用jQuery：

1、需要安装 jQuery

npm install jquery -- save (其中的 install 可以简写为 i)

2、配置 vue.config.js 文件

如果没有该文件，可以在 main.js 的同级目录手动创建该文件

文件的配置如下：

                  const webpack = require("webpack")    //  没有该插件需下载
                    module.exports = {
                      configureWebpack:{
                        plugins: [
                        new webpack.ProvidePlugin({
                          $ : "jquery",
                          jQuery : "jquery",
                          "window.jQuery" : "jquery" 
                        })
                      ]
                    }
                  }
                

二、在项目中使用bootstrap：

1、 安装 bootstrap，其有很多的组件依赖于 jQuery 和 popper

执行 npm install jquery bootstrap popper.js --save

注意：bootstrap 默认安装的是 v4, 想安 v3, 使用 bootstrap@3

2、 配置 vue.config.js 文件

文件的配置内容在配置 jQuery 的基础上在 new webpack.ProvidePlugin 中增加一项

Popper: ["popper.js","default"]

3、 配置 main.js 文件

在文件中引入 import 导入bootstrap

bootstrap.css 需要单独引入