官网：https://mint-ui.github.io/#!/zh-cn
一、安装
// 安装 # Vue 1.x cnpm install mint-ui@1 --save # Vue 2.0 cnpm install mint-ui --save二、引入组件
// 引入全部组件 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);三、引入样式 在main.js中引入style.css：
import 'mint-ui/lib/style.css';四、举例 1.Index List 索引列表，可由右侧索引导航快速定位到相应的内容。
新建一个名为Module的文件夹，在该文件夹中新建一个名为indexList.vue的文件；在App.vue中进行挂载APP.vue：
<template> <div id="app"> <v-indexList></v-indexList> </div> </template> <script> import IndexList from './Module/indexList'; export default { name: 'app', components:{ 'v-indexList':IndexList } } </script> <style lang="scss"> </style>indexList.vue：
<template> <div> <mt-index-list> <mt-index-section v-for="(item,index) in user" :index="item.type" :key="index"> <mt-cell v-for="(t,i) in item.child" :key="i" :title="t.name"></mt-cell> </mt-index-section> </mt-index-list> </div> </template> <script> export default { data(){ return { user:[ { type:"A", child:[ {name:"Aaron"}, {name:"Alden"}, {name:"Austin"}, {name:"Allen"}, {name:"Ava"}, {name:"Andy"}, {name:"Adams"} ] }, { index:"B", child:[ {name:"Barry"}, {name:"Baird"}, {name:"Baker"}, {name:"Beck"}, {name:"Bery"}, {name:"Bruce"}, {name:"Bryan"} ] }, { index:"C", child:[ {name:"Carl"}, {name:"Cole"}, {name:"Cain"}, {name:"Clay"}, {name:"Chloe"}, {name:"Cecil"} ] }, { index:"D", child:[ {name:"Dick"}, {name:"Dunn"}, {name:"David"}, {name:"Dean"}, {name:"Duke"}, {name:"Dillon"} ] } ] } } } </script> <style> </style>效果： 2.Message box 弹出式提示框，有多种交互形式。
接上个例子中的App.vue：
<template> <div id="app"> <v-indexList></v-indexList> <button @click="btnclick">btn</button> </div> </template> <script> import IndexList from './Module/indexList'; import { MessageBox } from 'mint-ui'; export default { name: 'app', components:{ 'v-indexList':IndexList }, methods:{ btnclick(){ MessageBox({ title:"提示", message:"确定执行此操作", showCancelButton:true }).then((res)=>{ console.log(res); }); } } } </script> <style lang="scss"> </style>效果： 3.Swipe 轮播图，可自定义轮播时间间隔、动画时长等。
新建一个名为Module的文件夹，在该文件夹中新建一个名为Swipe.vue的文件；在App.vue中进行挂载APP.vue：
<template> <div id="app"> <v-swipe></v-swipe> </div> </template> <script> import Swipe from './Module/Swipe'; export default { name: 'app', components:{ 'v-swipe':Swipe } } </script> <style lang="scss"> </style>Swipe.vue：
<template> <div id="swipe"> <mt-swipe :auto="4000"> <mt-swipe-item><img src="../image/1.jpg"></mt-swipe-item> <mt-swipe-item><img src="../image/2.jpg"></mt-swipe-item> <mt-swipe-item><img src="../image/3.jpg"></mt-swipe-item> </mt-swipe> </div> </template> <script> import { Swipe, SwipeItem } from 'mint-ui'; export default { } </script> <style scoped> #swipe{ height: 250px; background-color: pink; } </style>效果（轮播）：
