【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui

看了下饿了么团队开发的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">
.slider
width 100%
height 200px
.swipe-img
width 100%
height 100%
</style>

运行结果：



备注：methods中为本人练习中发送ajax获取data中recommends的方法。如果你想快速写demo的话，可以将method删掉，往recommends中填假的图片数据，例如：

recommends: [
{
linkUrl: 'http://www.baidu.com',
picUrl: 'http://www.sd.xinhuanet.com/news/yule/2017-07/07/1121280192_14993928268411n.jpeg'
},
{
linkUrl: 'http://www.baidu.com',
picUrl: 'http://pic.nen.com.cn/500/15/34/56/15345682_610838.jpg'
},
{
linkUrl: 'http://www.baidu.com',
picUrl: 'http://b.hiphotos.baidu.com/zhidao/pic/item/9825bc315c6034a8e7235341ce13495408237629.jpg'
},
{
linkUrl: 'http://www.baidu.com',
picUrl: 'http://b.hiphotos.baidu.com/image/pic/item/64380cd7912397dd682835d65382b2b7d1a2878b.jpg'
}
]

mint ui官网：https://mint-ui.github.io