使用饿了么的 MintUI 组件

一、MintUI 组件

注意：MUI不同于Mint-UI,MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于Bootstrap；而Mint-UI,是真正的组件库，是使用Vue技术封装出来的成套的组件，可以无缝的和VUE项目进行集成开发。

因此，从体验上来说，Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件。

从体验上来说，MUI和Bootstrap类似。

理论上，任何项目都可以使用MUI或Bootstrap，但是Mint-UI只适用于vue项目。

Github 仓储地址 https://github.com/ElemeFE/mint-ui

Mint-UI官方文档 http://mint-ui.github.io/#!/zh-cn

二、安装使用Mint-UI组件

安装


#如果是使用 Vue 1.x 安装 npm install mint-ui@1 -S 
#如果是使用 Vue 2.0 安装 npm install mint-ui -S

导入


// 引入全部组件 
import Vue from 'vue'; 
import Mint from 'mint-ui';
 Vue.use(Mint);

// 按需引入部分组件 推荐按需引入，因为不是所有的组件都能用得到 
import { Cell, Checklist } from 'mint-ui'; 
Vue.component(Cell.name, Cell); 
Vue.component(Checklist.name, Checklist);

按需引入需要安装插件：

npm install babel-plugin-component -D

配置：

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

参考：http://mint-ui.github.io/docs/#/zh-cn2/quickstart