Vue项目MUI的使用

最新推荐文章于 2024-08-07 10:07:56 发布

笑胖仔

最新推荐文章于 2024-08-07 10:07:56 发布

阅读量1k

点赞数 3

分类专栏： vue 文章标签： MUI vue.js vue mui使用 vue框架

本文链接：https://blog.csdn.net/pang787559613/article/details/104971816

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

一、下载：

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

github地址：https://github.com/dcloudio/mui
在这里插入图片描述

2、复制dist文件夹下三个文件至项目中：
在这里插入图片描述

二、引入：

在main.js中引入样式：

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

在这里插入图片描述

三、使用：

如：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>