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