Mint-UI、Element-UI、MUI概览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/85420160

一、Mint-UI

官方文档：http://mint-ui.github.io/#!/zh-cn  GitHub：https://github.com/ElemeFE/mint-ui/

Mint UI基于Vue.js的移动端组件库。

npm install mint-ui -S 用于Vue 2.0

（1）完整引入

所有CSS Components不用再单独引入，可以以标签形式直接使用。JS Components需要再引入。

/* main.js */
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';  // 样式文件需要单独引入，省略node_modules目录

Vue.use(Mint);

（2）按需引入

借助babel-plugin-component，可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

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

注册组件时，Button.name默认为'my-button' 

/* main.js */
import Vue from 'vue'
import {Button,Cell} from 'mint-ui' // 导入

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

二、Element-UI

官方文档：http://element-cn.eleme.io/#/zh-CN

Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。

npm i element-ui -S

完整引入与按需引入与Mint-UI相同。

三、MUI

官方文档：http://dev.dcloud.net.cn/mui/  GitHub：https://github.com/dcloudio/mui

MUI类似于Bootstrap。

MUI不能用npm下载，需手动下载导入。将dist文件夹拷入项目的lib文件夹。example文件夹的文件可以拷贝源码，类似于Bootstrap的源码。

/* main.js */
import './lib/mui/css/mui.min.css'

import './lib/mui/css/icons-extra.css' // 使用mui-icon-extra时导入

使用mui-icon-extra需要导入icons-extra.css和mui-icons-extra.ttf，在example的子文件夹下，拷贝到项目中。还需要基类mui-icon。