- 官網(wǎng)：https://mint-ui.github.io/#!/zh-cn
- Github: https://github.com/ElemeFE/mint-ui/
最近一個月的時間溉躲，工作上的事情特別多，要同時開發(fā)維護三四個項目揭糕，讓人覺得有些憔悴绢涡，也沒有時間去學習了，正好今天要聚餐，趁著下午的時間，把之前沒有寫完的Mint UI教程繼續(xù)寫一寫沿量。
接著上一篇：Vue移動端框架Mint UI教程-搭建環(huán)境引入框架（一）：http://www.reibang.com/p/874e5152b3c5
開始來寫代碼：
1：在components里面新建一個vue文件，將底部的Tab抽取出來成為一個組件使用柑晒。
2：app.vue代碼
打開app.vue欧瘪，引入組件眷射，寫相關(guān)代碼
<script>
import Footer from './components/FooterBar.vue'
export default {
name: 'app',
components: {
'footer-bar': Footer
},
computed: {}
}
</script>
3：在pages里面新建三個頁面
接下來就是編寫三個tabbar對應(yīng)的 路由出口界面匙赞，并且配置到路由對象中。（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：代碼寫好之后，來查看一下效果欧宜，嗯坐榆，底部導(dǎo)航欄完成
github鏈接：https://github.com/wangxiaoting666/Mint-UI
Mint UI教程匯總：
Vue移動端框架Mint UI教程-搭建環(huán)境引入框架（一）
http://www.reibang.com/p/874e5152b3c5
Vue移動端框架Mint UI教程-底部導(dǎo)航欄（二）
http://www.reibang.com/p/56e887cbb660
Vue移動端框架Mint UI教程-組件的使用（三）
http://www.reibang.com/p/5ec1e2d2f652
Vue移動端框架Mint UI教程-跳轉(zhuǎn)新頁面(四)
http://www.reibang.com/p/364d0462ddb6
Vue移動端框架Mint UI教程-調(diào)用模擬json數(shù)據(jù)(五)
http://www.reibang.com/p/6d3f1436b327
Vue移動端框架Mint UI教程-數(shù)據(jù)渲染到頁面（六）
http://www.reibang.com/p/dc532ab82d2a
Vue移動端框架Mint UI教程-接口跨域問題（七）
http://www.reibang.com/p/b28cd8290b2a
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程冗茸，愛運營席镀，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚夏漱。
堅持總結(jié)工作中遇到的技術(shù)問題豪诲，堅持記錄工作中所所思所見，對于博客上面有不會的問題挂绰，歡迎加入編程微刊qq群：260352626
