vue整合jQuery和bootstrap，实现官网效果，实现Glyphicon Halflings 的字体图标

最新推荐文章于 2022-12-12 11:17:48 发布

原创

最新推荐文章于 2022-12-12 11:17:48 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #jquery #vue

本文介绍了如何在Vue项目中整合jQuery和Bootstrap，以实现官网相同效果并使用Glyphicon Halflings字体图标。首先在Vue项目中安装jQuery，接着引入Bootstrap和popper.js。注意，安装的Bootstrap版本可能与官网文档不符，需要降级到3.3.7版本。通过这些步骤，你可以实现与Bootstrap中文官网一致的视觉效果。

引入jQuery

因为bootstrap里面有很多动态效果是基于jquery实现的，为了能完整显示效果以及后续开发的方便，在引入bootstrap之前先将jquery引入

首先在打开的vue项目控制台中，安装jquery
```
npm install jquery --save-dev
```
在build文件夹下的webpack.base.conf.js文件添加如下代码 :

在module.exports上面添加：
```
var webpack = require("webpack")
```
在module.exports里面添加：（别忘记逗号）
```
  plugins:[
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin
```