63. Vue MUI的基本使用

前言

上一篇章写了 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>

在浏览器显示如下：