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';

这样就可以使用了。如果有什么问题您可以随时与我联系。

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