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

最近一個(gè)月的時(shí)間，工作上的事情特別多，要同時(shí)開(kāi)發(fā)維護(hù)三四個(gè)項(xiàng)目，讓人覺(jué)得有些憔悴，也沒(méi)有時(shí)間去學(xué)習(xí)了，正好今天要聚餐，趁著下午的時(shí)間，把之前沒(méi)有寫(xiě)完的Mint UI教程繼續(xù)寫(xiě)一寫(xiě)。

接著上一篇：Vue移動(dòng)端框架Mint UI教程-搭建環(huán)境引入框架（一）：http://www.itdecent.cn/p/874e5152b3c5
開(kāi)始來(lái)寫(xiě)代碼：

1：在components里面新建一個(gè)vue文件，將底部的Tab抽取出來(lái)成為一個(gè)組件使用。

2：app.vue代碼
打開(kāi)app.vue，引入組件，寫(xiě)相關(guān)代碼

<script>
  import Footer from './components/FooterBar.vue'
  export default {
    name: 'app',
    components: {
      'footer-bar': Footer
    },
    computed: {}
  }
</script>

3：在pages里面新建三個(gè)頁(yè)面
接下來(lái)就是編寫(xiě)三個(gè)tabbar對(duì)應(yīng)的 路由出口界面，并且配置到路由對(duì)象中。（main.vue,my.vue,tool.vue）

4：打開(kāi)index.js文件
將這三個(gè)界面配置到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：接著我們修改項(xiàng)目的main.js文件，將路由和其他組件也都引入進(jìn)來(lái)使用。
沒(méi)有則不需要

// 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：代碼寫(xiě)好之后，來(lái)查看一下效果，嗯，底部導(dǎo)航欄完成

github鏈接：https://github.com/wangxiaoting666/Mint-UI

Mint UI教程匯總：

Vue移動(dòng)端框架Mint UI教程-搭建環(huán)境引入框架（一）
http://www.itdecent.cn/p/874e5152b3c5
Vue移動(dòng)端框架Mint UI教程-底部導(dǎo)航欄（二）
http://www.itdecent.cn/p/56e887cbb660
Vue移動(dòng)端框架Mint UI教程-組件的使用（三）
http://www.itdecent.cn/p/5ec1e2d2f652
Vue移動(dòng)端框架Mint UI教程-跳轉(zhuǎn)新頁(yè)面(四)
http://www.itdecent.cn/p/364d0462ddb6
Vue移動(dòng)端框架Mint UI教程-調(diào)用模擬json數(shù)據(jù)(五)
http://www.itdecent.cn/p/6d3f1436b327
Vue移動(dòng)端框架Mint UI教程-數(shù)據(jù)渲染到頁(yè)面（六）
http://www.itdecent.cn/p/dc532ab82d2a
Vue移動(dòng)端框架Mint UI教程-接口跨域問(wèn)題（七）
http://www.itdecent.cn/p/b28cd8290b2a

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛(ài)編程，愛(ài)運(yùn)營(yíng)，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題，堅(jiān)持記錄工作中所所思所見(jiàn)，對(duì)于博客上面有不會(huì)的問(wèn)題，歡迎加入編程微刊qq群：260352626