【移动端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">.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相关推荐

十九.激光和惯导LIO-SLAM框架学习之项目工程代码介绍---代码框架和一些文件解释
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
十六.激光和惯导LIO-SLAM框架学习之配置自用传感器实时室外跑LIO-SAM框架
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
【CV实战】年轻人的第一个深度学习图像分割项目应该是什么样的（Pytorch框架）？...
我们上次给新手们介绍了第一个合适入门的深度学习CV项目,可阅读[CV实战]年轻人的第一个深度学习CV项目应该是什么样的?(支持13大深度学习开源框架),本次我们再给大家介绍一个新的任务,图像分割,包括 ...
Android 框架学习4：一次读懂热门图片框架 Picasso 源码及流程
Android 框架学习1:EventBus 3.0 的特点与如何使用 Android 框架学习2:源码分析 EventBus 3.0 如何实现事件总线 Android 框架学习3:我从 EventB ...
十三.激光SLAM框架学习之livox-Mid-70雷达使用和实时室外跑框架
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
python自动化框架pytest接口关联串联_基于python接口自动化框架搭建_pytest+jenkins+allure...
本接口测试框架使用python语言实现,基于pytest测试框架,同时集成Jenkins和Allure 核心特性封装requests请求,使用装饰器模式详细的请求日志输出环境与数据隔离,实现不同 ...

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

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

最新文章

热门文章