前端学习（2183）：tabber--基本架构的构建

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;
}