使用vue+elementui实现 顶部导航栏

使用 Vue 和 Element UI 实现顶部导航栏的步骤如下：

1. 安装 Vue 和 Element UI

npm install vue
npm install element-ui

2. 引入 Element UI

在 `main.js` 文件中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建顶部导航栏组件

在 `components` 目录下创建 `Header.vue` 组件，代码如下：

<template>
  <div class="header">
    <div class="header-logo">Logo</div>
    <el-menu class="header-menu" mode="horizontal">
      <el-menu-item index="1">导航一</el-menu-item>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-menu-item index="3">导航三</el-menu-item>
      <el-submenu index="4" placement="bottom-start">
        <template slot="title">导航四</template>
        <el-menu-item index="4-1">选项1</el-menu-item>
        <el-menu-item index="4-2">选项2</el-menu-item>
        <el-menu-item index="4-3">选项3</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="header-user">用户信息</div>
  </div>
</template>

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

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}

.header-logo {
  font-size: 24px;
  font-weight: bold;
}

.header-menu {
  margin: 0 20px;
}

.header-user {
  font-size: 14px;
  color: #999;
}
</style>

4. 在 App.vue 中使用顶部导航栏组件

在 `App.vue` 文件中引入 `Header.vue` 组件，并在模板中使用：

<template>
  <div class="app">
    <Header />
    <router-view />
  </div>
</template>

<script>
import Header from './components/Header.vue'

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

<style>
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

完成以上步骤后，你就可以在 Vue 应用中使用顶部导航栏组件了。