Vue移动端框架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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券