VUE （Element-plus）简单实现：页面导航栏

以下是一个使用Vue和Element Plus创建简单页面顶部导航栏的示例代码：

首先，确保安装了Element Plus：

npm install element-plus --save

然后，在Vue组件中使用<el-menu>来创建导航栏：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <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-menu-item index="4">日志管理</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中的菜单项：', key, keyPath);
    },
  },
};
</script>
 
<style>
/* 在这里添加CSS样式 */
</style>

在这个例子中，el-menu 组件创建了一个水平的导航栏，其中包含了四个菜单项。:default-active 绑定了当前激活菜单项的索引，@select 事件用于监听菜单项的点击事件。

确保在Vue的入口文件（通常是 main.js 或 app.js）中引入并使用Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这样就可以在Vue应用中看到一个基本的水平导航栏了。