Vue3+Vite项目引入Bootstrap5、bootstrap-icons方式
作者：天天百度
这篇文章主要介绍了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目录下创建一个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
如果安装成功会有以下图例的内容显示：
检查是否安装成功
npm list
查看是否出现：
在main.js中导入
import "bootstrap-icons/font/bootstrap-icons.css";
PS: 卸载bootstrap-icons
npm uninstall bootstrap-icons --save
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。