1.创建脚手架
2.在APP.vue中编写基本的格式
<div id="app">
<div id="tab-bar">
<div>首页</div>
<div>分类</div>
<div>购物车</div>
<div>我的</div>
</div>
</div>
3.引用css样式
1)在main中通过commdjs导入
require(./)
2)在app.vue中@import导入
@import "./assets/css/base.css";
3)并为其它配置样式
#tab-bar{
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0px -3px 1px rgba(100, 100, 100, 0.1);
}
#tabb{
flex:1;
text-align: center;
height: 49px;
background: #f6f6f6;
该步骤效果
3.封装到对应的组建中
import tabbar from './components/tabbar/Tabbar.vue'
export default {
name:'APP',
components:{tabbar}
}
</script>