用vue写以一个精美公共头部导航栏

好的，在 Vue 中写一个公共头部导航栏的基本步骤如下：

1. 创建一个 Vue 组件，用于渲染头部导航栏。这个组件可以包含头部导航栏的所有 HTML 代码和相关的样式。

2. 在组件的 data 属性中声明头部导航栏中显示的内容。这些内容可以是菜单项的名称、链接等。

3. 在组件的 template 中使用 v-for 指令来遍历 data 中的内容，并渲染出头部导航栏的 HTML 结构。

4. 在其他需要使用头部导航栏的页面或组件中使用该组件。

下面是一个简单的例子：

<template>
  <nav>
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'HeaderNav',
  data() {
    return {
      items: [
        { id: 1, name: '首页', link: '/' },
        { id: 2, name: '关于我们', link: '/about' },
        { id: 3, name: '联系我们', link: '/contact' },
      ],
    };
  },
};
</script>

<style>
nav {
  height: 50px;
  background-color: #333;
  color: #fff;
}

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

nav ul li {
  flex: 1;
  text-align: center;
  line-height: 50px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}
</style>

在其他页面或组件中使用该组件，可以这样写：

<template>
  <div>
    <