MintUI 组件和MUI组件

使用 饿了么的 MintUI 组件和MUI组件

MintUI组件

文档链接地址：
Github 仓储地址

Mint-UI官方文档

1. 导入所有MintUI组件：

import MintUI from 'mint-ui'

2. 导入样式表：

import 'mint-ui/lib/style.css'

3. 在 vue 中使用 MintUI：

Vue.use(MintUI)//注册组件

4. 使用（type不同，button的颜色不同）：

<mt-button type="primary" size="large">primary</mt-button>
<mt-button type="danger" size="small">danger</mt-button>
<mt-button type="default" size="large" plain>default1</mt-button>

按需导入MintUI组件的配置方式

import { Header, Swipe, SwipeItem,Button,Lazyload } from 'mint-ui'
//Header是头部，Swipe轮播图，Lazyload懒加载

6. 在vue中使用组件

 Vue.component(Header.name, Header)
 Vue.component(Swipe.name, Swipe)
 Vue.component(SwipeItem.name, SwipeItem)
 Vue.component(Button.name, Button)
 Vue.use(Lazyload)

7. 将要使用的组件的对应的代码添加到.vue组件中

 <!-- 顶部 Header 区域 -->
    <mt-header fixed title="程序员·Vue项目"></mt-header>

使用 MUI 组件

官网首页

文档地址

1. 导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

2. 在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

3. 根据官方提供的文档和example，在.vue组件文件中添加对应组件的模板代码

MintUI和Mui的区别

MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；