如何構建一個使用MintUI的Vue項目

這篇文章給大家介紹如何構建一個使用MintUI的Vue項目，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

　　由餓了么前端團隊推出的MintUI是一個基于Vue.js的移動端組件庫。自6月初開源以來，根據社區(qū)和團隊內部的反饋，修復了一些bug并新增了部分組件，于本周發(fā)布了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(向服務端發(fā)請求)

　　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項目就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。