webpack在vue项目中引入jquery以及bootstrap方法

在vue项目中使用bootstrap框架，npm安装注意.
bootstrap中js插件依赖于jquery，所以在这之前必须安装jquery。

jquery安装

npm install jquery --save-dev

1、在package.json中会自动添加一行代码：“jquery”: “^2.2.3” 

"dependencies": {    "element-ui": "^2.0.5",    "vue": "^2.5.2",    "vue-router": "^3.0.1",    "jquery": "^2.2.3"  }

　　

2、在build文件webpack.base.conf.js中添加一行数据：

//注：...代表省略自有的， //必定事先声明webpack，不然下面会不识别webpack const webpack = require('webpack') ... module.exports = {     resolve: {         ...         alias: {           ...           'jquery': 'jquery'         }     },        ... } //如果是是开发[dev]环境则在webpack.dev.conf.js 中添加如下内容  plugins: [ .....         new webpack.ProvidePlugin({           $: "jquery",           jQuery: "jquery",           "windows.jQuery": "jquery"         })     ],

3、在main.js中加入：import $ from ‘jquery’
4、也可以使用 npm install jquery@3.5.1 --save-dev 指定版本

5、引入bootstrap

1. 下载bootstrap    npm install bootstrap@3.3.0  --save-dev
2. 引入bootstrap
   import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

这样jquery就安装完成了。

bootstrap安装：

1、使用npm install bootstrap@3.3.0  --save-dev

2、在需要的页面引入

import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'

popper 安装

在高版本中，还需要popper 依赖，所以还需要下载 popper

cnpm i popper

---

 

最后npm run dev启动项目，就ok啦。