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

引入jQuery

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

1. 首先在打开的vue项目控制台中，安装jquery

   npm install jquery --save-dev
   

2. 在build文件夹下的webpack.base.conf.js文件添加如下代码 :

   在module.exports上面添加：

   var webpack = require("webpack")
   

   在module.exports里面添加：（别忘记逗号）

     plugins:[
       new webpack.optimize.CommonsChunkPlugin('common.js'),
       new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
       })
     ],
   

3. 在main.js文件中引入jquery，就可以在组件中使用了

   import $ from 'jquery'
   Vue.use($);
   

引入bootstrap

1. 控制台中安装bootstrap和popper.js

   npm install bootstrap -D
   npm install popper.js -D
   

2. 在main.js中添加以下css与js的引用

     import "bootstrap/dist/css/bootstrap.min.css";
     import "bootstrap/dist/js/bootstrap.min.js";
   

3. 在package.json中查看依赖是否更新，如果没有更新手动添加一下即可

   "dependencies": {
       "core-js": "^3.6.4",
       "jquery": "^3.4.1",
       "popper.js": "^1.16.1",
       "vue": "^2.6.11",
       "vue-router": "^3.1.5",
       "zico": "^1.5.1"
     },
   

4. 现在可以使用bootstrap进行开发了

注意！

上述安装方法安装的bootstrap是最新的，和bootstrap中文官网的bootstrap3中文文档显示的样式不一致，需要自行更改bootstrap版本。打开bootstrap3中文文档的源代码可以看见，官网引用的版本是3.3.7，因此我们只需在控制台输入

npm install --save bootstrap@3.3.7

用来下载对应的版本。以前下载的不用删，新下载的会自动覆盖。

下面就可以实现和官网完全一样的效果了，Glyphicon Halflings 的字体图标也能使用。
具体效果图如下：