Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)

编辑：rootadmin

Vue3+Vite项目引入Bootstrap5、bootstrap-icons Vue3+Vite项目引入Bootstrap5 \bootstrap-icons

推荐整理分享Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue引入vconsole,vue 引入,引入vue.js,vue 引入,vue引入vconsole,引入vuex,vue引入vconsole,vue 引入,内容如对您有帮助，希望把文章链接给更多的朋友！

官方教程给出了bootstrap5.2和vite的使用方法。

安装

Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)

安装 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';这样就可以使用了。如果有什么问题您可以随时与我联系。

写文章不易，给个赞吧！写文章不易，给个赞吧！写文章不易，给个赞吧！写文章不易，给个赞吧！写文章不易，给个赞吧！写文章不易，给个赞吧！

本文链接地址:https://www.jiuchutong.com/zhishi/283559.html 转载请保留说明！

上一篇：dlg.exe是什么 dlg.exe是病毒吗(dl是什么文件)

下一篇：玩游戏的显示器多大合适？多大尺寸的屏幕玩游(玩游戏的显示器要高刷还是高分辨率)