项目怎么导入mui_Vue项目MUI的使用

本文介绍了如何将MUI框架引入Vue项目。首先,从github下载MUI内容并解压,然后将dist文件夹下的必要文件复制到项目中。接着,在main.js中进行样式引入。最后,给出了一个Tabbar组件的使用示例。
摘要由CSDN通过智能技术生成

MUI官网: https://dev.dcloud.net.cn/mui/ui/

一、下载:

1、下载github内容至本地解压:

github地址:https://github.com/dcloudio/mui

01bf48b884c1328c4af0ce15d792b169.png

2、复制dist文件夹下三个文件至项目中:

032f770d5a4b48e1878c38d20d5332dc.png

e9c972e9db57c3bc8205eccdb9035b7d.png

二、引入:

在main.js中引入样式:

// 导入 MUI 的样式表
import './lib/mui/css/mui.min.css'

ed5dab1f65326b173725855f4a47c5ae.png

三、使用:

如:Tabbar

<!-- Tabbar -->    
 <nav class="mui-bar mui-bar-tab">      
 <a class="mui-tab-item mui-active" href="#tabbar">                     
    <span class="mui-icon mui-icon-home"></span>                    
    <span class="mui-tab-label">首页</span>      
 </a>      
 <a class="mui-tab-item" href="#tabbar-with-chat">        
    <span class="mui-icon mui-icon-email">
    <span class="mui-badge">9</span>        
 </span>        
 <span class="mui-tab-label">消息</span>      
 </a>      
 <a class="mui-tab-item" href="#tabbar-with-contact">        

    <span class="mui-icon mui-icon-contact"></span>        
    <span class="mui-tab-label">通讯录</span>      
 </a>      
 <a class="mui-tab-item" href="#tabbar-with-map">        

    <span class="mui-icon mui-icon-gear"></span>        
    <span class="mui-tab-label">设置</span>      
 </a>    
 </nav>

e7183fd779b28134fbe7216627df60ed.png

f8916fb4f14e2c628e15440949de1a00.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值