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