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';
这样就可以使用了。如果有什么问题您可以随时与我联系。
写文章不易,给个赞吧!
写文章不易,给个赞吧!
写文章不易,给个赞吧!
写文章不易,给个赞吧!
写文章不易,给个赞吧!
写文章不易,给个赞吧!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)