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

总结

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

您可能感兴趣的文章:

使用Vue实现带拖动和播放功能的时间轴
这篇文章主要为大家详细介绍了如何使用Vue实现带拖动和播放功能的时间轴,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
这篇文章主要介绍了Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细
v-model 是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如 input、checkbox 等，咱可以在自定义组件中实现 v-model，这篇文章主要介绍了Vue3 SFC 和 TSX 方式自定义组件实现 v-model,需要的朋友可以参考下
2022-10-10
vue项目如何全局修改el-button样式
这篇文章主要介绍了vue项目如何全局修改el-button样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
详解vue3中setUp和reactive函数的用法
这篇文章主要介绍了vue3函数setUp和reactive函数的相关知识及setup函数和reactive函数的注意点，通过具体代码给大家介绍的非常详细,需要的朋友可以参考下
2021-06-06
前端Vue3项目打包成Docker镜像运行的详细步骤
将Vue3项目打包、编写Dockerfile、构建Docker镜像和运行容器是部署Vue3项目到Docker的主要步骤,这篇文章主要介绍了前端Vue3项目打包成Docker镜像运行的详细步骤,需要的朋友可以参考下
2024-09-09
vue如何在自定义组件中使用v-model
本篇文章主要介绍了vue如何在自定义组件中使用v-model，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
一篇文章带你吃透Vuex3的状态管理
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下
2022-07-07
vue实现给某个数据字段添加颜色
这篇文章主要介绍了vue实现给某个数据字段添加颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
springboot+VUE实现登录注册
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05