位置: IT常识 - 正文

Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)

编辑:rootadmin
Vue3+Vite项目引入Bootstrap5、bootstrap-icons Vue3+Vite项目引入Bootstrap5 \bootstrap-icons

推荐整理分享Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue引入vconsole,vue 引入,引入vue.js,vue 引入,vue引入vconsole,引入vuex,vue引入vconsole,vue 引入,内容如对您有帮助,希望把文章链接给更多的朋友!

官方教程给出了bootstrap5.2和vite的使用方法。

安装Vue3+Vite项目引入Bootstrap5、bootstrap-icons(vue引入mui)

安装 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';这样就可以使用了。如果有什么问题您可以随时与我联系。

写文章不易,给个赞吧! 写文章不易,给个赞吧! 写文章不易,给个赞吧! 写文章不易,给个赞吧! 写文章不易,给个赞吧! 写文章不易,给个赞吧!

本文链接地址:https://www.jiuchutong.com/zhishi/283559.html 转载请保留说明!

上一篇:dlg.exe是什么 dlg.exe是病毒吗(dl是什么文件)

下一篇:玩游戏的显示器多大合适?多大尺寸的屏幕玩游(玩游戏的显示器要高刷还是高分辨率)

  • 2017营销思维方式最新技巧(营销思维5步法)

    2017营销思维方式最新技巧(营销思维5步法)

  • word双删除线怎么弄(word双删除线怎么设置细节)

    word双删除线怎么弄(word双删除线怎么设置细节)

  • 苹果发送特效短信为什么对方没法看(iphone发送特效短信)

    苹果发送特效短信为什么对方没法看(iphone发送特效短信)

  • qq被异地互联业务登录(qq被异地互联业务登录是什么意思)

    qq被异地互联业务登录(qq被异地互联业务登录是什么意思)

  • 为什么别人发的朋友圈我要点进去才能看到(为什么别人发的抖音作品我看不到)

    为什么别人发的朋友圈我要点进去才能看到(为什么别人发的抖音作品我看不到)

  • Word文档首字下沉在哪里设置(word文档首字下沉两行怎么设置)

    Word文档首字下沉在哪里设置(word文档首字下沉两行怎么设置)

  • 腾讯视频怎么下载到手机(腾讯视频怎么下载到手机相册)

    腾讯视频怎么下载到手机(腾讯视频怎么下载到手机相册)

  • kindle的书删了还看得见(kindle不小心删掉书)

    kindle的书删了还看得见(kindle不小心删掉书)

  • 媒体平台类型有哪些(媒体平台的定义)

    媒体平台类型有哪些(媒体平台的定义)

  • 小米8屏幕指纹版拆后盖教程(小米8屏幕指纹版换电池教程视频)

    小米8屏幕指纹版拆后盖教程(小米8屏幕指纹版换电池教程视频)

  • 华为死亡30秒是什么意思(华为死亡三十秒表情包)

    华为死亡30秒是什么意思(华为死亡三十秒表情包)

  • 电脑怎么全选复制文字(电脑怎么全选复制粘贴文字快捷键)

    电脑怎么全选复制文字(电脑怎么全选复制粘贴文字快捷键)

  • 快手充值记录删了怎么查询(快手充值记录删了如何退款)

    快手充值记录删了怎么查询(快手充值记录删了如何退款)

  • 无线充电能过夜充吗(无线充电过夜好吗)

    无线充电能过夜充吗(无线充电过夜好吗)

  • iPhone11屏幕坏点是通病吗(苹果11屏幕坏点可以换新机吗)

    iPhone11屏幕坏点是通病吗(苹果11屏幕坏点可以换新机吗)

  • 学设计需要什么条件(学设计需要什么配置)

    学设计需要什么条件(学设计需要什么配置)

  • 小遛共享押金能退吗(小遛共亨押金怎样退)

    小遛共享押金能退吗(小遛共亨押金怎样退)

  • 华为荣耀20如何关闭后台(华为荣耀20如何恢复出厂设置)

    华为荣耀20如何关闭后台(华为荣耀20如何恢复出厂设置)

  • 一万抖音币提现多少(一万抖音币提现要多少钱)

    一万抖音币提现多少(一万抖音币提现要多少钱)

  • ios13深色模式省电吗(苹果13深色模式有什么用)

    ios13深色模式省电吗(苹果13深色模式有什么用)

  • 天气信息己过期如何恢复(天气信息显示已过期)

    天气信息己过期如何恢复(天气信息显示已过期)

  • 微信如何看对方在不在线(微信如何看对方是否在线)

    微信如何看对方在不在线(微信如何看对方是否在线)

  • win10搜索不到打印机(win10搜索不到打印机怎么添加)

    win10搜索不到打印机(win10搜索不到打印机怎么添加)

  • 网速测试工具条怎么使用?(网速检测工具)

    网速测试工具条怎么使用?(网速检测工具)

  • 最长待机的手机是什么(待机最长的手机智能排行榜 2020)

    最长待机的手机是什么(待机最长的手机智能排行榜 2020)

  • 基于stm32的太空人温湿度时钟项目——DHT11(HAL库)(基于stm32的飞行器)

    基于stm32的太空人温湿度时钟项目——DHT11(HAL库)(基于stm32的飞行器)

  • 研发支出属于什么现金流量项目
  • 增值税滞纳金怎么做账
  • 福建税务网上办税流程
  • 视同销售行为涉税处理?
  • 主管税务机关是否参与清算
  • 餐厅打包盒算不算商品
  • 未达起征点销售额是含税还是不含税
  • 退税发票误勾选确认
  • 往法人账户转备用金
  • 税前薪酬包括五险一金吗
  • 房产税计税依据
  • 发票丢了企业所得怎么办
  • 发票开的是推广服务费计入什么费用?
  • 销售收入冲红如何入账
  • 一般账户网银可以发工资吗
  • 已经使用的固定资产其变动方式等基础资料将
  • 小企业税金及附加会计分录
  • 小规模纳税人网上申报流程视频
  • 景区门票入什么费用
  • 提供出口收汇核算方法
  • 支付往来款项应该注意什么
  • 私立幼儿园收的特色课费可以追回吗
  • 在建工程人工费会计分录
  • 一般纳税人接受固定资产投资时相关的科目可能有
  • php能开发微信小程序吗
  • php比较大小的函数
  • 公司有长期挂账的说法吗
  • PHP中使用什么关键字声明变量的作用域为全局
  • 父母将住房无偿赠送给子女 增值税
  • 预收房屋租金
  • 企业缴纳保险的比例
  • 斐讯路由器怎么重置
  • 百度飞桨paddle
  • 搬迁补偿费属于什么费
  • 支付属于借方吗?
  • php引用文件的方法
  • php查询sqlserver数据库
  • 企业所得税汇算清缴
  • 农村土地承包经营权流转合同
  • 航天税盘服务费全额抵扣报税流程
  • 软件增值税即征即退文件
  • 支付兼职工资账务处理
  • 还贷款的卡有利息吗
  • 所得税汇算清缴前取得跨年发票
  • 记账和结账可以一起用吗
  • 唐山发生5.1级地震
  • CentOS 6.5 x64系统中安装MongoDB 2.6.0二进制发行版教程
  • erp用友u8操作教程
  • PostgreSQL中调用存储过程并返回数据集实例
  • Postgre数据库Insert 、Query性能优化详解
  • 其他综合收益的概念
  • 购买的服务如何申请退款
  • 溢价发行债券取得的收益应如何处理
  • 支付设备款怎么做账
  • 毁损的原材料怎么处理
  • 我没付款,但是显示成功?
  • 母子公司往来款是否涉及交税
  • 一个企业建账需要注意些什么
  • 在sqlserver2008中
  • mysql 5.5 5.6
  • win7 64位系统如何查看计算机名称为了应付某一操作
  • Win10 Mobile 10563预览版微软官方模拟器下载
  • win7系统打开浏览器后突然卡住了
  • SSSvr.exe - SSSvr是什么进程
  • win7笔记本触摸板怎么用滑轮
  • 数字小键盘不管用
  • addObserver和postNotification函数传递函数的区别
  • 常用正则表达式汇总
  • python2.7安装numpy
  • apache部署项目
  • unity画面效果润色
  • 预处理命令可以放在程序中的任何位置
  • js的设计模式有哪些
  • python模拟操作
  • python 隐函数作图
  • 深入理解计算机系统 电子书
  • 安徽国税app
  • 农业方面有哪些专业
  • 什么是美国注册公司
  • 翡翠是否交消费税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设