看了下饿了么团队开发的PC端vue ui框架Element ui之后，顺便看了看同团队开发的移动端的vue ui框架mint ui，那么在vue项目中应该如何使用mint ui呢？以下做简单的记录。
首先安装mint：
$ npm install mint-ui --save
在main.js中添加如下代码：
import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)
完成以上步骤，即可在项目中使用mint-ui。
举例：在项目中使用mint提供的swipe轮播图组件。
代码如下：
<template><div class="recommend"><div class="slider"><mt-swipe :auto="4000"><mt-swipe-item v-for="item in recommends"><a :href="item.linkUrl"><img class="swipe-img" :src="item.picUrl"></a></mt-swipe-item></mt-swipe></div><div style="width:100%;height:200px;background:#333;"></div></div></template><script type="text/ecmascript-6">import {getRecommend} from 'api/recommend'import {ERR_OK} from 'api/config'export default {data() {return {recommends: []}},created() {this._getRecommend()},methods: {_getRecommend() {getRecommend().then(res => {if (res.code === ERR_OK) {this.recommends = res.data.slider}})}}}</script><style lang="stylus" rel="stylesheet/stylus">.sliderwidth 100%height 200px.swipe-imgwidth 100%height 100%</style>
运行结果：
备注：methods中为本人练习中发送ajax获取data中recommends的方法。如果你想快速写demo的话，可以将method删掉，往recommends中填假的图片数据，例如：
recommends: [{linkUrl: '',picUrl: 'http://www./news/yule/-07/07/1121280192_14993928268411n.jpeg'},{linkUrl: '',picUrl: '/500/15/34/56/15345682_610838.jpg'},{linkUrl: '',picUrl: 'http://b./zhidao/pic/item/9825bc315c6034a8e7235341ce13495408237629.jpg'},{linkUrl: '',picUrl: 'http://b./image/pic/item/64380cd7912397dd682835d65382b2b7d1a2878b.jpg'}]
mint ui官网：https://mint-ui.github.io
