一、创建vue create l8_2 并且配置css babel route axios
二、结构布局
三、组件构成
四、具体代码
1.assets 包含字体和图标
2.components 包含tab-bars.vue和top-menu.js底部和顶部
(1)tab-bars.vue
<template>
<div class="footer">
<router-link to="/home" class="iconfont icon-xuanzhongshangcheng myicon"/>
<router-link to="/chat" class="iconfont icon-chat myicon"/>
<router-link to="/plus" class="iconfont icon-FontAwesomeuserplus myicon"/>
<router-link to="/cata" class="iconfont icon-cata myicon"/>
<router-link to="/me" class="iconfont icon-me myicon"/>
</div>
</template>
<script>
export default{
}
</script>
<style scoped="scoped">
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
background: #708090;
flex-direction: row;
}
.myicon{
font-size:26px;
line-height: 26px;
text-decoration: none;
}
.router-link-active{
font-size:32px;
line-height: 32px;
color:palevioletred;
}
a:visited{/*伪类*/
color: aliceblue;
}
</style>``
(2)top-menu.vue
<template>
<div class="menu-wrap">
<router-link v-for="(item,index) in menus" :key="index" :to="item.url" class="menu-btn">
{{item.name}}
</router-link>
</div>
</template>
<script>
export default{
data(){
return{
menus:[
{
name:'动态',
url:'/home'
},
{
name:'推荐',
url:'/home/tj'
},
{
name:'关注',
url:'/home/gz'
},
{
name:'精选',
url:'/home/jx'
}
]
}
}
}
</script>
<style scoped="scoped">
.menu-wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #708090;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 18px;
line-height: 24px;
color: black;
}
.router-link-exact-active{
font-size: 24px;
line-height: 24px;
}
a:visited{/*伪类*/
color: aliceblue;
}
.menu-btn{
text-decoration: none;
}
</style>
3.route index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect:'/home'
// name: 'Home',
// component: Home
},
{
path:'/home',
component:Home,
// childern:[
// {
// path:'/home/tj',
// component: () => import('../views/home/tj.vue')
// },
// {
// path:'/home/gz',
// component: () => import('../views/home/gz.vue')
// },
// {
// path:'/home/jx',
// component: () => import('../views/home/jx.vue')
// }
// ]定义动态路由
},
{
path:'/home/:type',
component:Home
},
{
path:'/cata',
component: () => import('../views/cata.vue')
},
{
path:'/chat',
component: () => import('../views/chat.vue')
},
{
path:'/plus',
component: () => import('../views/plus.vue')
},
{
path:'/me',
component: () => import('../views/me.vue')
}
]
const router = new VueRouter({
routes
})
export default router
5.views cata.vue/chat.vue/Home.vue/me.vue/plus.vue
cata.vue chat.vue me.vue plus.vue 相同
<template>
<div>
cata
<tab-bar></tab-bar>
</div>
</template>
<script>
import TabBar from "../components/tab-bars.vue"
export default {
components: {
TabBar
}
}
</script>
<style>
</style>
(2)Home.vue
{{name}}
<tab-bar></tab-bar>
5.app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="less">
</style>
main.js**
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import "./assets/font/iconfont.css"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
效果图