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目录下创建一个style.scss文件

// Import all of Bootstraps 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;

这样就可以使用了  

     

     

     

。如果有什么问题您可以随时与我联系


  




  




  




  。

写文章不易   

   

   

   

，给个赞吧！

写文章不易  

     

     

     

，给个赞吧！

写文章不易


  




  




  




  ，给个赞吧！

写文章不易  


  


  


  

，给个赞吧！

写文章不易   
     
     
     
，给个赞吧！

写文章不易



   




   




   




  ，给个赞吧！