Vue移動端框架Mint UI教程-底部導航欄（二）

---

• 官網：https://mint-ui.github.io/#!/zh-cn
• Github: https://github.com/ElemeFE/mint-ui/

---

最近一個月的時間，工做上的事情特別多，要同時開發維護三四個項目，讓人以爲有些憔悴，也沒有時間去學習了，正好今天要聚餐，趁着下午的時間，把以前沒有寫完的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