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

更新时间：2023年10月26日 09:35:52 作者：天天百度

这篇文章主要介绍了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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3使用element-plus实现弹窗效果
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue实现多个数组合并
这篇文章主要介绍了vue实现多个数组合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
使用vue-router切换组件时使组件不销毁问题
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3实现LuckSheet在线预览Excel表格
在前端开发中预览Excel文件是常见的需求之一,本文将介绍如何使用Vue.js框架以及两个优秀的Excel库——LuckyExcel和Luckysheet,来实现Excel文件在线预览功能,希望对大家有所帮助
2023-11-11
vue的.vue文件是怎么run起来的(vue-loader)
通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下
2018-12-12
Vue在css中图片路径问题解决的配置方法
这篇文章主要为大家介绍了Vue在css中图片路径问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue中PC端地址跳转移动端的操作方法
最近小编接到一个项目pc端和移动端是两个独立的项目，两个项目项目中的内容基本相同，链接组合的方式都有规律可循，接到的需求便是在移动端访问pc端的URL连接时，重定向至移动端对应页面，下面小编给大家分享实现过程，一起看看吧
2021-11-11
详解Vue3的响应式原理解析
这篇文章主要为大家介绍了Vue3的响应式原理解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
Vue首屏加载过慢出现白屏的6种优化方案汇总
vue项目打包上线后,首次打开会发现加载很慢,出现白屏的问题,下面这篇文章主要给大家介绍了关于Vue首屏加载过慢出现白屏的6种优化方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vue如何实现上传图片和显示图片
这篇文章主要介绍了vue如何实现上传图片和显示图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10