在移动应用中很多功能都是必不可少的，使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。
基础设置
使用vue-cli搭建项目框架
在index.html文件中添加<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>，在移动端设置禁止缩放，以便显示合适大小的页面。
如果要将页面封装为app，那么需要将config/index.js中build的assetsPublicPath设置为’./’，build获得的页面可以直接打开，而不需要使用服务器。
通用功能
一、页面跳转
一般应用都会拥有多个页面，在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')},
