Vue3+Vite項(xiàng)目引入Bootstrap5、bootstrap-icons方式
更新時(shí)間：2023年10月26日 09:35:52 作者：天天百度
這篇文章主要介紹了Vue3+Vite項(xiàng)目引入Bootstrap5、bootstrap-icons方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue3+Vite項(xiàng)目引入Bootstrap5 \bootstrap-icons
官方教程給出了bootstrap5.2和vite的使用方法。
安裝
安裝 Bootstrap、 Popper，因?yàn)?Bootstrap的下拉菜單、彈出框和工具提示都依賴于 Popper來定位。
如果您不打算使用這些組件，則可以在此處省略 Popper。
npm i --save bootstrap @popperjs/core
安裝額外的依賴Sass來正確導(dǎo)入和捆綁 Bootstrap 的 CSS。
npm i --save-dev sass
安裝圖標(biāo)庫(kù)
npm i bootstrap-icons
引入bootstrap樣式文件
在assets目錄下創(chuàng)建一個(gè)style.scss文件
// Import all of Bootstrap's CSS @import "bootstrap/scss/bootstrap"; // 圖標(biāo) @import 'bootstrap-icons/font/bootstrap-icons.css';
在入口文件main.ts/main.js中引入樣式文件和JS文件
import '/src/assets/styles.scss' import "@popperjs/core"; import "bootstrap";
跟其他ui庫(kù)一樣，可以按需引入
import Alert from 'bootstrap/js/dist/alert';
import { Tooltip, Toast, Popover } from 'bootstrap';
這樣就可以使用了。
如何在Vue腳手架中導(dǎo)入bootstrap-icons（bootstrap4圖標(biāo)庫(kù)）
使用npm命令在項(xiàng)目中安裝
輸入命令：
npm install bootstrap-icons
如果安裝成功會(huì)有以下圖例的內(nèi)容顯示：
檢查是否安裝成功
npm list
查看是否出現(xiàn)：
在main.js中導(dǎo)入
import "bootstrap-icons/font/bootstrap-icons.css";
PS: 卸載bootstrap-icons
npm uninstall bootstrap-icons --save
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用element-plus實(shí)現(xiàn)彈窗效果
本文主要介紹了Vue3使用element-plus實(shí)現(xiàn)彈窗效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用vue-router切換組件時(shí)使組件不銷毀問題
這篇文章主要介紹了使用vue-router切換組件時(shí)使組件不銷毀問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3實(shí)現(xiàn)LuckSheet在線預(yù)覽Excel表格
在前端開發(fā)中預(yù)覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個(gè)優(yōu)秀的Excel庫(kù)——LuckyExcel和Luckysheet,來實(shí)現(xiàn)Excel文件在線預(yù)覽功能,希望對(duì)大家有所幫助2023-11-11
vue的.vue文件是怎么run起來的(vue-loader)
通過vue-loader，解析.vue文件，在webpack解析，拆解vue組件 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下2018-12-12
這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue中PC端地址跳轉(zhuǎn)移動(dòng)端的操作方法
最近小編接到一個(gè)項(xiàng)目pc端和移動(dòng)端是兩個(gè)獨(dú)立的項(xiàng)目，兩個(gè)項(xiàng)目項(xiàng)目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動(dòng)端訪問pc端的URL連接時(shí)，重定向至移動(dòng)端對(duì)應(yīng)頁(yè)面，下面小編給大家分享實(shí)現(xiàn)過程，一起看看吧2021-11-11
這篇文章主要為大家介紹了Vue3的響應(yīng)式原理解析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案匯總
vue項(xiàng)目打包上線后,首次打開會(huì)發(fā)現(xiàn)加載很慢,出現(xiàn)白屏的問題,下面這篇文章主要給大家介紹了關(guān)于Vue首屏加載過慢出現(xiàn)白屏的6種優(yōu)化方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue如何實(shí)現(xiàn)上傳圖片和顯示圖片問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10