引入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({jQuery: "jquery",$: "jquery"})],

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

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

引入bootstrap

控制臺中安裝bootstrap和popper.js

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

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

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

在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"},

現在可以使用bootstrap進行開發了

注意！

上述安裝方法安裝的bootstrap是最新的，和bootstrap中文官網的bootstrap3中文文檔顯示的樣式不一致，需要自行更改bootstrap版本。打開bootstrap3中文文檔的源代碼可以看見，官網引用的版本是3.3.7，因此我們只需在控制臺輸入

npm install --save bootstrap@3.3.7

用來下載對應的版本。以前下載的不用刪，新下載的會自動覆蓋。

下面就可以實現和官網完全一樣的效果了，Glyphicon Halflings 的字體圖標也能使用。
具體效果圖如下：

總結

以上是生活随笔為你收集整理的vue整合jQuery和bootstrap，实现官网效果，实现Glyphicon Halflings 的字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。