常用

1、Mint UI:

a.主页:

https://mint-ui.github.io/#!/zh-cn

b.说明:

饿了么开源的基于 vue 的移动端 UI 组件库

2、Elment

a.主页:

http://element-cn.eleme.io/#/zh-CN

b.说明:

饿了么开源的基于 vue 的 PC 端 UI 组件库

使用 Mint UI

1、下载:

npm install --save mint-ui

2、实现按需打包
（1）下载

npm install --save-dev babel-plugin-component

（2）修改 babel 配置

"plugins":  [
    "transform-runtime",
    [
        "component",  
        [
            {
                "libraryName": "mint-ui", 
                "style": true
            }
        ]
    ]
]

3、 mint-ui 组件分类
1）标签组件

2）非标签组件
4、使用 mint-ui 的组件
1）index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
    if('addEventListener' in document){ 
        document.addEventListener('DOMContentLoaded', function(){
            FastClick.attach(document.body);
        }, false);
    }
    if(!window.Promise){ 
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
</script>

2）main.js

import {Button} from 'mint-ui'
Vue.component(Button.name, Button)

2）App.vue

<template>
    <mt-button @click="handleClick" type="primary" style="width: 100%">Test</mt-button>
</template>

<script>
    import {Toast} from 'mint-ui' 
    
    export default {
        methods: { 
            handleClick(){
                Toast('点击了测试');
            }
        }
    }
</script>