app.vue

<template><div id="app"><div id="tab"><div class="tab-bar-item">首頁</div><div class="tab-bar-item">分類</div><div class="tab-bar-item">購物車</div><div class="tab-bar-item">我的</div></div></div> </template><script> export default {name: 'App' } </script><style> @import "./assets/css/style.css"#tab {display:flex;background-color:#f6f6f6;position:fixed;left:0;right:0;bottom:0; } .tab-bar-item{flex:1;text-align:center;height:49px; } </style>

index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}] })

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'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })

style.css

body {padding: 0;margin: 0; }

總結(jié)

以上是生活随笔為你收集整理的前端学习（2183）：tabber--基本架构的构建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。