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;

这样就可以使用了  

     

     

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


  




  




  



。

写文章不易   

   

   

，给个赞吧！

写文章不易  

     

     

     ，给个赞吧！

写文章不易


  




  




  



，给个赞吧！

写文章不易  


  


  


，给个赞吧！

写文章不易   
     
     
    ，给个赞吧！

写文章不易



   




   




   


，给个赞吧！