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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下2023-03-03
Vue-cli@3.0 是一个全新的 Vue 项目脚手架。这篇文章主要介绍了Vue-cli@3.0 插件系统简析,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了webstorm添加*.vue文件支持，webstorm很多的插件内置，不用安装插件，下面尝试用vue和es6做项目，有兴趣的可以了解一下2018-05-05
Vue3中新增了一种特殊的监听器watchEffect,本文主要介绍了Vue3中watchEffect高级侦听器的具体使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性，为什么要用这东西呢？通过下面这篇文章你将解决这些问题，下面来一起看看吧。2016-09-09
这篇文章主要为大家详细介绍了vue递归实现自定义tree组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
Vite是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知),下面这篇文章主要给大家介绍了关于webpack转vite的详细操作流程与问题总结的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
element的表单校验证件号规则及输入“无”的情况校验通过(示例代码)
这篇文章主要介绍了element的表单校验证件号规则及输入“无”的情况校验通过,使用方法对校验数据进行过滤判断,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了Vant 中的Toast设置全局的延迟时间操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论