最近一个月的时间，工作上的事情特别多，要同时开发维护三四个项目，让人觉得有些憔悴，也没有时间去学习了，正好今天要聚餐，趁着下午的时间，把之前没有写完的Mint UI教程继续写一写。
1：在components里面新建一个vue文件，将底部的Tab抽取出来成为一个组件使用。
2：app.vue代码
打开app.vue，引入组件，写相关代码
<script> import Footer from './components/FooterBar.vue' export default { name: 'app', components: { 'footer-bar': Footer }, computed: {} } </script>
3：在pages里面新建三个页面
接下来就是编写三个tabbar对应的 路由出口界面，并且配置到路由对象中。（main.vue,my.vue,tool.vue）
4：打开index.js文件
将这三个界面配置到router文件夹下的index.js中去：
import Vue from 'vue' import Router from 'vue-router' import Main from '../pages/main.vue' import Tool from '../pages/tool.vue' import My from '../pages/my.vue' Vue.use(Router); export default new Router({ routes: [ { path: "/", component: Main }, { path: '/main', component: Main }, { path: '/tool', component: Tool }, { path: '/my', component: My } ] })
5：接着我们修改项目的main.js文件，将路由和其他组件也都引入进来使用。
没有则不需要
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Mint from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false // 引入全部组件 Vue.use(Mint); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
6：代码写好之后，来查看一下效果，嗯，底部导航栏完成
