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

一、下载:

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

github地址:https://github.com/dcloudio/mui
Vue项目MUI的使用 - 图1

2、复制dist文件夹下三个文件至项目中:
Vue项目MUI的使用 - 图2Vue项目MUI的使用 - 图3

二、引入:

在main.js中引入样式:

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

Vue项目MUI的使用 - 图4

三、使用:

如:Tabbar

  1. <!-- Tabbar -->
  2. <nav class="mui-bar mui-bar-tab">
  3. <a class="mui-tab-item mui-active" href="#tabbar">
  4. <span class="mui-icon mui-icon-home"></span>
  5. <span class="mui-tab-label">首页</span>
  6. </a>
  7. <a class="mui-tab-item" href="#tabbar-with-chat">
  8. <span class="mui-icon mui-icon-email">
  9. <span class="mui-badge">9</span>
  10. </span>
  11. <span class="mui-tab-label">消息</span>
  12. </a>
  13. <a class="mui-tab-item" href="#tabbar-with-contact">
  14. <span class="mui-icon mui-icon-contact"></span>
  15. <span class="mui-tab-label">通讯录</span>
  16. </a>
  17. <a class="mui-tab-item" href="#tabbar-with-map">
  18. <span class="mui-icon mui-icon-gear"></span>
  19. <span class="mui-tab-label">设置</span>
  20. </a>
  21. </nav>

Vue项目MUI的使用 - 图5
Vue项目MUI的使用 - 图6