携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
上一篇文章中，我们完成了项目创建的配置以及引入了Vant组件库，接下来我们就进行项目头部导航栏的开发了。
- 首先，我们项目的主体页面大致样式如下图所示，只开发了一部分：
- 现在，我们要完成的是顶部的导航栏部分，我们在components文件夹中创建一个topNav.vue头部组件，然后在我们的主文件HomeView.vue文件中创建，引入import topNav from "../components/topNav.vue" ，注册 components: { topNav,}这个组件即可使用这个组件了。
- 总体布局是两边两个图标，中间四个span标签，这两个图标我们需要到阿里巴巴矢量库中下载到assets文件中，下载完成之后引入即可，然后就是两个img标签里面四个span标签，再写上对应的内容即可。具体的代码如下图所示：
- 重要的是CSS的布局
- 我们之选在配置的时候选用的css预处理器是less，所以我们的style后面需要添加lang="less" scoped，然后我们需要个整个大容器topNav设置宽高，并且flex横向排布，如果要想四个span标签均匀分隔开来排布，则需要使用到justify-content: space-around;，并且这里还使用到了选中即文字高亮显示，我们需要定义一个.active，使得文字加粗显示，然后icon图标也要选择合适的大小，文字和图标还要进行侧轴居中对齐，使用到了 align-items: center;所以，总体的css代码如下图所示：
