在移動應用中很多功能都是必不可少的，使用vue構建移動應用自然也就需要實現這些功能。之所以寫這篇文章，是希望大家能更多的將注意力放在項目的核心業務上，而不是過多的關注通用功能。
基礎設置
通用功能
一、頁面跳轉
一般應用都會擁有多個頁面，在vue中通過vue-router來管理頁面。移動應用頁面跳轉時，都有轉場效果，在vue中我們也可以實現。
在路由文件中設置meta為數字，meta表示其路由的深度，然后在App.vue中設置：
<template> <transition :name="transitionName"> <router-view></router-view> </transition></template><script>export default { name: 'app', data () { return { transitionName: 'fade' } }, watch: { '$route' (to, from) { let toDepth = to.meta let fromDepth = from.meta if (fromDepth > toDepth) { this.transitionName = 'fade-left' } else if (fromDepth < toDepth) { this.transitionName = 'fade-right' } else { this.transitionName = 'fade' } } }}</script><style></style>監聽$route，根據to、from meta值的大小設置不同的跳轉動畫。如果應用到多種跳轉動畫，可以根據詳情，具體情況具體應用。
登錄跳轉
PS:這里的動畫效果引用自animate.scss;
二、底部導航
直接引用Tabbar組件即可，如果需要添加跳轉動畫可以在<router-view></router-view>外設置：
<template> <div class="content"> <!--<transition name="fade" mode="out-in">--> <router-view></router-view> <!--</transition>--> <Tabbar :routers="[ {path: '/index/home', icon: 'icon-home', name: '首頁'}, {path: '/index/loading', icon: 'icon-course', name: '加載'}, {path: '/index/message', icon: 'icon-info', name: '信息'} ]" > </Tabbar> </div></template><script>export default { name: 'Index', components: {Tabbar: require('components/Tabbar')}, data () { return { } }}</script><style lang="scss" scoped> .content{ background-color: #eee;}</style>三、數據加載
加載數據與加載頁面是存在先后順序的，比較通用方法是先加載頁面，顯示數據加載效果，在數據加載完成之后顯示完整的頁面。數據加載效果作為組件添加到應用中，比較繁瑣，所以使用自定義指令的方式實現數據加載效果的顯示。
數據加載效果
四、接口文件
import fetch from 'isomorphic-fetch'import store from 'store'import router from './router'var env = process.env.NODE_ENVvar rootUrlif (env === 'development') { rootUrl = ''}if (env === 'production') { rootUrl = ''}const post = function (url, params = {}) { return fetch(rootUrl + url, { method: 'post', headers: { 'Content-type': 'application/json; charset=utf-8', 'Authorization': store.get('token') }, body: JSON.stringify(params) }).then(function (res) { if (res.status === 401) { // 沒有權限 api.logout() } else { return res.json() } })}const urls = [ 'classAtCurDate' // 普通接口列表]var api = {}for (var url of urls) { (function (url) { api[url] = (params) => { console.log(url) return post('course/' + url, params) } })(url)}// 需要特殊處理的接口api.logout = () => { store.clearAll() router.push('login')}api.login = (params) => { store.set('id', 1) store.set('token', 2) return Promise.resolve({params})}export default api可以在全局設置，也可以在需要時導入
// 在main.js中導入api接口import api from '../src/api'Vue.$api = Vue.prototype.$api = api
五、登錄權限設置
路由加載前，檢查是否有登錄權限（判斷用戶id是否存在），如果存在直接跳過登錄頁進入首頁，如果不存在在跳轉登錄頁。
router.beforeEach((to, from, next) => { if (cache.get('id') && to.path === '/login') { next('/index') } else if (!cache.get('id') && to.path !== '/login') { next('/login') } else { next() }})六、常用第三方組件
許多常用組件都已經有了很好的實現，在項目開發中重復造輪子是一件很不明智的事情。vue移動應用有很多合適的庫可以選擇，如mint-ui、vux，這里不一一列舉，想了解更多的可以自行谷歌，或直接到GitHub上搜索，這里已mint-ui為例，講一下比較常用的一些組件。
提示組件
提示組件即顯示信息、提示用戶的組件，toast、alert、 prompt皆為此類。
加載數據
如上拉加載數據、下拉加載（刷新）數據、滾動加載數據；這些在mint-ui中有較好的實現
日期選擇
比較通用的功能，但自己實現起來還是相對麻煩的，借助第三方組件就可以很快的實現了。
使用第三方組件雖然能夠快速完成項目，但是不建議過度使用，一些常用的組件如按鈕、表單還是應該自己實現，一是因為這些組件實現不是很復雜，二是因為往往對這些組件每個應用都有自己的設計要求，使用第三方然后修改樣式，不但比自編寫更復雜而且增加冗余文件。
使用第三方組件庫，一般有兩種導入方式：一是全部導入，這樣會引入很多不必要的文件；二是只導入使用的組件和樣式。建議使用第二種方式，避免導入多余組件，mint-ui可以使用Use babel-plugin-component簡化單獨導入組件的寫法。
GitHub地址：https://github.com/x007xyz/vue-mobile
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
