前言
上一篇章写了 Mint-UI 的基本使用，本篇章再来介绍MUI。
注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI 是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
MUI的介绍
MUI是最接近原生APP体验的高性能前端框架。
官网地址：https://dev.dcloud.net.cn/mui/
开发文档：https://dev.dcloud.net.cn/mui/ui/
image-20200315212803694
MUI的基本使用
下载MUI
访问github进行下载：https://github.com/dcloudio/mui
image-20200315220606090
image-20200315220651564
下载下来的文件如下：
image-20200315222139508
其中dist就是我们需要引入的相关js、css等文件，而 examples 则是相关的示例代码。
导入MUI
首先将MUI的文件拷贝到项目中，如下：
image-20200315222330414
在main.js导入MUI，如下：
image-20200315222631258
// 导入 MUI
import './static/lib/mui-master/dist/css/mui.min.css'
在app组件使用mui按钮
首先看看官网的示例，如下：
image-20200315222747018
在app组件设置按钮如下：
image-20200315222908145
<!-- MUI 按钮 -->
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>
在浏览器显示如下：
image-20200315222945703
更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：
image
image
