帮我写一个vue的头部导航栏的代码

好的，以下是一个基本的Vue头部导航栏代码：

<template>
<div class="header">
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的账户</a></li>
</ul>
</nav>
</div>
</template>

<style scoped>
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
background-color: #f1f1f1;
padding: 0 30px;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

nav li {
margin-right: 20px;
}

nav li:last-child {
margin-right: 0;
}

nav a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}

nav a:hover {
color: #666;
}
</style>