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