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

拼搏现实的明天。 2023-01-10 05:04 238阅读 0赞

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

## jquery安装 ##

> npm install jquery --save-dev

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

<table> 
 <tbody> 
 <tr> 
 <td> <code>"dependencies": { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>"element-ui": "^2.0.5",</code> <code>&nbsp;&nbsp;&nbsp;</code><code>"vue": "^2.5.2",</code> <code>&nbsp;&nbsp;&nbsp;</code><code>"vue-router": "^3.0.1",</code> <code>&nbsp;&nbsp;&nbsp;</code><code>"jquery": "^2.2.3"</code> <code>&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

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

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'`

![这里写图片描述][SouthEast]  
这样jquery就安装完成了。

## bootstrap安装： ##

1、使用npm install bootstrap@3.3.0  --save-dev  
![这里写图片描述][SouthEast 1]  
2、在需要的页面引入

<table> 
 <tbody> 
 <tr> 
 <td> <code>import 'bootstrap/dist/css/bootstrap.min.css'</code> <code>import 'bootstrap/dist/js/bootstrap.min.js'</code> </td> 
 </tr> 
 </tbody> 
</table>

## popper 安装 ##

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

cnpm i popper

--------------------

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

[SouthEast]: /images/20221119/f06aa5c340404a58ba74aaa084ca32b9.png
[SouthEast 1]: /images/20221119/2b6ee1927f4245d38308ec2d619f36a1.png