MintUI 组件
Github 仓储地址
Mint-UI官方文档
安装Mint UI
npm install --save mint-ui
导入所有MintUI组件：
import MintUI from 'mint-ui'
导入样式表：这里 可以省略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
在 vue 中使用 MintUI：把所有的组件，注册为全局的组件
Vue.use(MintUI)
使用的例子：
css组件
<mt-button type="primary" size="large">primary</mt-button>
js组件
<script>// 按需导入 Toast 组件import { Toast } from "mint-ui";export default {data() {return {// 文档里 Toast()函数有一个默认返回值（含有close方法），放在data中的toastInstanse里。toastInstanse: null};},//组件被创建之后，就调用这个函数created() {this.getList();},methods: {getList() {// 模拟获取列表的 一个 AJax 方法// 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据this.show();// 不用setTimeout(function()原因如下：//setTimeout传入的这个方法内部的this会被改写指向window//箭头函数会改变this的指向，箭头函数内部的this会指向声明箭头函数时所在作用域的thissetTimeout(() => {// 让某个方法延迟执行， 当 3 秒过后，数据获取回来了，要把 Toast 移除this.toastInstanse.close();}, 3000);},show() {this.toastInstanse = Toast({message: "这是提示消息--正在加载数据",duration: -1, // 如果是 -1 则弹出之后不消失position: "top",// 设置 图标的类,图标从bootstrap找// 导入bootstrap样式 import 'bootstrap/dist/css/bootstrap.css'iconClass: "glyphicon glyphicon-heart", // 自定义Toast的样式，需要自己提供一个类名// import './css/app.css'// 类里面 .mytoast i{color:red !important;} //若只让图标有样式，图标默认被包裹在i里className: "mytoast" });}}};</script>
按需导入MintUI 组件
安装babel-plugin-component：
npm install babel-plugin-component -D
将.babelrc修改为：
{"presets": ["env", "stage-0"],"plugins": ["transform-runtime", ["component", [{"libraryName": "mint-ui","style": true}]]]}
import { Button } from 'mint-ui'ponent(Button.name, Button)// Button.name的值是mt-button
使用 MUI 组件
官网首页
文档地址
导入 MUI 的样式表：注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
解压出来后把里面的dist文件放在项目里src中的lib 中，并改名为mui。
查找样式。mui-master包中–>examples–>hello-mui—>examples—>找到需要的样式复制代码,或者在文档里找
import '../lib/mui/css/mui.min.css'
在webpack.config.js中添加新的loader规则：
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
根据官方提供的文档和example，尝试使用相关的组件
