用vue封装一个头部组件

好的，下面是一个简单的头部组件的 Vue 实现：

<template>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header',
};
</script>

<style scoped>
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav ul li {
  margin: 0 10px;
}

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

这个组件包含一个带有三个链接的简单导航栏。你可以根据自己的需要进行修改和扩展。在一个 Vue 应用中，你可以像这样使用这个组件：

<template>
  <div>
    <Header />
    <main>
      <!-- 其他内容 -->
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import Footer from './Footer.vue';

export default {
  components: {
    Header,
    Footer,
  },
};
</script>

在这个例子中，我们向 Vue 实例中注册了 `Header` 和 `Footer` 组件，然后在模板中使用它们。