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來(lái)定位。
如果您不打算使用這些組件，則可以在此處省略 Popper。
npm i --save bootstrap @popperjs/core
安裝額外的依賴Sass來(lái)正確導(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)文章
使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決
這篇文章主要介紹了Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model的詳細(xì)
v-model 是 vue3 中的一個(gè)內(nèi)置指令，很多表單元素都可以使用這個(gè)屬性，如 input、checkbox 等，咱可以在自定義組件中實(shí)現(xiàn) v-model，這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue項(xiàng)目如何全局修改el-button樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解vue3中setUp和reactive函數(shù)的用法
這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關(guān)知識(shí)及setup函數(shù)和reactive函數(shù)的注意點(diǎn)，通過(guò)具體代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟
將Vue3項(xiàng)目打包、編寫(xiě)Dockerfile、構(gòu)建Docker鏡像和運(yùn)行容器是部署Vue3項(xiàng)目到Docker的主要步驟,這篇文章主要介紹了前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟,需要的朋友可以參考下2024-09-09
本篇文章主要介紹了vue如何在自定義組件中使用v-model，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
springboot+VUE實(shí)現(xiàn)登錄注冊(cè)
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05