位置: 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是什么文件)

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

  • 小米12怎么取消今日推荐(小米12怎么取消主题壁纸)

    小米12怎么取消今日推荐(小米12怎么取消主题壁纸)

  • 苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

    苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

  • 一个抖音号可以登两个手机吗(一个抖音号可以绑定两个抖音小店吗)

    一个抖音号可以登两个手机吗(一个抖音号可以绑定两个抖音小店吗)

  • usp插口是什么意思(usp接口失灵怎么办)

    usp插口是什么意思(usp接口失灵怎么办)

  • 相对地址和绝对地址的区别(相对地址和绝对地址的概念)

    相对地址和绝对地址的区别(相对地址和绝对地址的概念)

  • 虚拟男友华为在哪(虚拟男友华为怎么分手)

    虚拟男友华为在哪(虚拟男友华为怎么分手)

  • 开机显示american megatrends是什么意思(开机显示英文字母是怎么回事)

    开机显示american megatrends是什么意思(开机显示英文字母是怎么回事)

  • 华为应用助手悬浮窗怎么设置(华为应用助手悬浮窗怎么添加应用)

    华为应用助手悬浮窗怎么设置(华为应用助手悬浮窗怎么添加应用)

  • 电脑系统声音在哪打开(电脑系统声音在哪找)

    电脑系统声音在哪打开(电脑系统声音在哪找)

  • 快手曝光券有什么用(快手曝光券在哪里领取)

    快手曝光券有什么用(快手曝光券在哪里领取)

  • 速推版和定向版有什么区别(速推版和定向版哪个好贴吧)

    速推版和定向版有什么区别(速推版和定向版哪个好贴吧)

  • 苹果6耳机苹果8能用吗(苹果6用苹果8的耳机有什么影响吗?)

    苹果6耳机苹果8能用吗(苹果6用苹果8的耳机有什么影响吗?)

  • 抖音直播间封禁是什么意思(抖音直播间封禁申诉)

    抖音直播间封禁是什么意思(抖音直播间封禁申诉)

  • 快手每天可以点多少赞(快手每天可以点击多少非好友关注)

    快手每天可以点多少赞(快手每天可以点击多少非好友关注)

  • ps怎么打印照片(ps怎么打印照片6寸照片)

    ps怎么打印照片(ps怎么打印照片6寸照片)

  • 苹果x原彩显示怎么恢复(苹果x原彩显示没有了怎么办)

    苹果x原彩显示怎么恢复(苹果x原彩显示没有了怎么办)

  • 苹果x可以改双卡么(苹果x可以改双卡双待吗)

    苹果x可以改双卡么(苹果x可以改双卡双待吗)

  • 荣耀手环3充电要多久(荣耀手环3充电器)

    荣耀手环3充电要多久(荣耀手环3充电器)

  • 显卡在哪里看(惠普笔记本显卡在哪里看)

    显卡在哪里看(惠普笔记本显卡在哪里看)

  • 华为mate20pro海外版区别(华为mate20pro海外版升级鸿蒙)

    华为mate20pro海外版区别(华为mate20pro海外版升级鸿蒙)

  • 5g时代将会带来什么变革(5g时代会有什么变化)

    5g时代将会带来什么变革(5g时代会有什么变化)

  •  word文档改不了内容怎么办(word文档改不了输入法)

    word文档改不了内容怎么办(word文档改不了输入法)

  • 该公众号提供的服务出现故障(该公众号提供的服务出现故障,请稍后再试怎么回事)

    该公众号提供的服务出现故障(该公众号提供的服务出现故障,请稍后再试怎么回事)

  • win10系统在哪里下载(Win10系统在哪里添加信任)

    win10系统在哪里下载(Win10系统在哪里添加信任)

  • 网页不播放flash(网页不播放声音怎么设置)

    网页不播放flash(网页不播放声音怎么设置)

  • 固定资产一次性扣除申报表怎么填
  • 租入厂房再转租账要怎么做
  • 运输货车折旧计算公式
  • 企业奖金会计分录
  • 本年利润是净利润还是利润总额
  • 公允价值模式下,投资性房地产不计提折旧或摊销
  • 信用减值损失在利润表怎么填列
  • 代扣个人社保的账务处理
  • 金税盘维护费减免政策代码
  • 经营利润所得税费用的计算公式
  • 跨年发票冲红重新开具购买方做账不
  • 融资租赁与经营租赁相比具有的优势
  • 资本公积转实收资本会计科目
  • 开具出口发票时免税类型怎么选择?
  • 个人开劳务发票几个点
  • 企业所得税的纳税人和负税人一致吗
  • 出口业务类型怎么写
  • 新注册的公司用不用开公户
  • 投资性房地产的后续计量从成本模式转为公允价值模式的
  • 主营业务收入需要交增值税吗
  • 投资合伙企业对公司有债务责任吗
  • 小微企业行业划分标准 工信部
  • 如何免费获取网页文字
  • 医生规培生补贴每年多少钱
  • 购入的车辆入账包括哪些费用
  • 存出投资款要计入现金流吗
  • mac重装macos
  • 现金折扣的会计处理方法
  • php获取api内容
  • vue移动和pc两套代码
  • php link指令
  • html页面间传数据
  • 银行汇票未用退回情况说明
  • php代码报错
  • 加计扣除减免政策
  • phpsql防注入代码
  • 现金流量表中如何考虑折旧费
  • 移动端适配方案面试题
  • 接受捐赠固定资产的改建支出
  • 生态位模型原理
  • 超参数及其作用
  • users命令
  • 增值税和普通发票的区别图片
  • python htmltestrunner报告
  • phpcms二次开发教程
  • 公章盖错在旁边加盖正确的说明
  • 经费支出的定义
  • Bootstrap table 控制表格高度固定(行高固定)并且不受数据量影响
  • 开业前需要支出什么费用
  • 建筑业外管证预审要多久
  • 库存现金怎么算
  • sql2016异地备份
  • linux 升级软件
  • 餐饮营业收入怎么算
  • 企业出售商铺需交税吗
  • 电商平台收入何时到账
  • 宣传费税前扣除什么意思
  • 环保公司开票内容
  • 股权投资如何记账
  • 研发费用加计扣除的条件
  • 退货会计如何处理
  • sql分页查询怎么实现
  • sql server中数据类型怎么用
  • win7系统如何查看文件扩展名
  • winxp无法删除文件
  • slserv.exe - slserv进程是什么意思
  • win7免费升win8
  • fedora 图形界面
  • w10鼠标
  • react 技巧
  • cocos2d-x window实现鼠标移动 键盘事件
  • opengl超级宝典第八版 pdf
  • javascript中new Array()和var arr=[]用法区别
  • python计算两个数乘积代码
  • android新手入门
  • html中meta
  • Python中字符串的索引
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
  • 太原市地税局各分局局长
  • 个体工商户税收起征点是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设