vue整合jQuery和bootstrap,实现官网效果,实现Glyphicon Halflings 的字体图标
生活随笔
收集整理的這篇文章主要介紹了
vue整合jQuery和bootstrap,实现官网效果,实现Glyphicon Halflings 的字体图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
引入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 的字体图标的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html语言加入图片背景音乐,如何插入背
- 下一篇: Vue使用iview组件库