用vue写一个手机app底部导航栏

可以使用vue-router和vue-awesome-swiper第三方库来实现一个带有底部导航栏的手机app界面。

首先，在main.js中导入vue-router和vue-awesome-swiper：

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueRouter)
Vue.use(VueAwesomeSwiper)

然后，创建一个App.vue组件，包含底部导航栏和路由视图：

<template>
  <div id="app">
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="tabbar">
      <router-link to="/" class="tabbar-item">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </router-link>
      <router-link to="/category" class="tabbar-item">
        <i class="iconfont icon-category"></i>
        <span>分类</span>
      </router-link>
      <router-link to="/cart" class="tabbar-item">
        <i class="iconfont icon-cart"></i>
        <span>购物车</span>
      </router-link>
      <router-link to="/profile" class="tabbar-item">
        <i class="iconfont icon-profile"></i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
.tabbar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0,0,0,.15);
  z-index: 99;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  text-decoration: none;
}

.tabbar-item.active {
  color: #33a3f4;
}

.tabbar-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

.main {
  margin-bottom: 50px;
}
</style>

在路由配置文件中，定义每个路由对应的组件：

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue'
import Category from './views/Category.vue'
import Cart from './views/Cart.vue'
import Profile from './views/Profile.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/category',
      component: Category
    },
    {
      path: '/cart',
      component: Cart
    },
    {
      path: '/profile',
      component: Profile
    }
  ]
})

最后，在各个页面组件中，使用vue-awesome-swiper实现轮播图等效果。

以上就是一个简单的带有底部导航栏的手机app界面的实现。