看了下餓了么團隊開發的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: '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
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。