如何构建一个使用MintUI的Vue项目

这篇文章给大家介绍如何构建一个使用MintUI的Vue项目，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

　　由饿了么前端团队推出的MintUI是一个基于Vue.js的移动端组件库。自6月初开源以来，根据社区和团队内部的反馈，修复了一些bug并新增了部分组件，于本周发布了0.2.0版本。

　　MintUI的安装

　　npm安装：npmimint-ui-S

　　MintUI的代码

　　//1、完整引入

　　importVuefrom'vue'

　　importMintUIfrom'mint-ui'

　　import'mint-ui/lib/style.css'

　　Vue.use(MintUI)

　　//2、引入部分组件

　　import{MessageBox}from'mint-ui'//弹出式提示框(错误提示)

　　import{Toast}from'mint-ui';//简短的消息提示框(信息提示)

　　import'mint-ui/lib/style.css'

　　Object.defineProperty(Vue.prototype,'$messageBox',{value:MessageBox})

　　Object.defineProperty(Vue.prototype,'$toast',{value:Toast})

　　import{Loadmore}from'mint-ui'//下拉/上拉刷新

　　Vue.component(Loadmore.name,Loadmore)

　　//3、提示框例子

　　//xxx.vue

　　this.$toast('点赞成功')

　　this.$messageBox.alert('亲，活动已结束')

　　//request.js(向服务端发请求)

　　import{Indicator,MessageBox}from'mint-ui'

　　service.interceptors.request.use(config=>{//request拦截器

　　Indicator.open('加载中...')//显示加载提示框

　　returnconfig

　　})

　　service.interceptors.response.use(//respone拦截器

　　response=>{

　　Indicator.close()//关闭加载提示框

　　constres=response.data

　　if(res.ReturnCode!=='000000'){

　　}else{

　　returnres

　　}

　　},

　　error=>{

　　Indicator.close()

　　MessageBox.alert('太火爆了吧，稍安勿躁，亲，再试试')

　　returnPromise.reject(error)

　　}

　　)

关于如何构建一个使用MintUI的Vue项目就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。