位置: IT常识 - 正文
Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)
编辑：rootadminVue3+Vite项目引入Bootstrap5、bootstrap-icons Vue3+Vite项目引入Bootstrap5 \bootstrap-icons
本文链接地址:https://www.jiuchutong.com/zhishi/283559.html
转载请保留说明！
推荐整理分享Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue引入vconsole,vue 引入,引入vue.js,vue 引入,vue引入vconsole,引入vuex,vue引入vconsole,vue 引入,内容如对您有帮助，希望把文章链接给更多的朋友！
官方教程给出了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';这样就可以使用了。如果有什么问题您可以随时与我联系。写文章不易，给个赞吧！ 写文章不易，给个赞吧！ 写文章不易，给个赞吧！ 写文章不易，给个赞吧！ 写文章不易，给个赞吧！ 写文章不易，给个赞吧！
上一篇：dlg.exe是什么 dlg.exe是病毒吗(dl是什么文件)
下一篇：玩游戏的显示器多大合适？多大尺寸的屏幕玩游(玩游戏的显示器要高刷还是高分辨率)
