最近一个月的时间，工作上的事情特别多，要同时开发维护三四个项目，让人觉得有些憔悴，也没有时间去学习了，正好今天要聚餐，趁着下午的时间，把之前没有写完的Mint UI教程继续写一写。
接着上一篇：Vue移动端框架Mint UI教程-搭建环境引入框架（一）：https://www.jianshu.com/p/874e5152b3c5
开始来写代码：
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：代码写好之后，来查看一下效果，嗯，底部导航栏完成
github链接：https://github.com/wangxiaoting666/Mint-UI
Mint UI教程汇总：
Vue移动端框架Mint UI教程-搭建环境引入框架（一）
https://www.jianshu.com/p/874e5152b3c5
Vue移动端框架Mint UI教程-底部导航栏（二）
https://www.jianshu.com/p/56e887cbb660
Vue移动端框架Mint UI教程-组件的使用（三）
https://www.jianshu.com/p/5ec1e2d2f652
Vue移动端框架Mint UI教程-跳转新页面(四)
https://www.jianshu.com/p/364d0462ddb6
Vue移动端框架Mint UI教程-调用模拟json数据(五)
https://www.jianshu.com/p/6d3f1436b327
Vue移动端框架Mint UI教程-数据渲染到页面（六）
https://www.jianshu.com/p/dc532ab82d2a
Vue移动端框架Mint UI教程-接口跨域问题（七）
https://www.jianshu.com/p/b28cd8290b2a
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，欢迎加入编程微刊qq群：260352626
