如何在Element Plus库中创建一个基本的Menu组件示例？

在Element Plus库中，创建一个基本的Menu组件示例相对简单。首先，你需要安装Element Plus库，然后按照以下步骤操作：

1. **引入依赖**:
在你的项目文件（如HTML、Vue.js组件）的开头部分，引入Element Plus的`<el-menu>`标签：

<script src="https://unpkg.com/element-plus/lib/index.js"></script>

或者如果你使用的是npm包管理，可以在`main.js`或Vue组件内的`setup`函数中引入：

import { ElMenu } from 'element-plus';

2. **创建Menu组件**:
创建一个Vue组件并添加一个`ElMenu`元素，给它设置一些菜单项（包括`default-active`属性指定默认选中的项）：

<template>
  <div>
    <el-menu :default-active="activeIndex" router>
      <el-menu-item index="1">导航一</el-menu-item>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-submenu index="3">
        <template slot="title">导航三</template>
        <el-menu-item index="3-1">子导航一</el-menu-item>
        <el-menu-item index="3-2">子导航二</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1', // 设置默认激活的菜单项
    };
  },
};
</script>

3. **路由绑定**:
如果你想让菜单项对应页面路径，可以使用`router`属性，并确保已经配置了相应的路由：

<!-- 使用v-bind:class="{ active: isActive(path) }" 和 router-link -->
<el-menu-item v-for="(item, index) in menuItems" :key="index" :index="item.path" :class="{ active: isActive(item.path) }" :router="{ to: item.path }">
  {{ item.name }}
</el-menu-item>

其中`isActive`是一个计算属性，用于检查当前菜单项是否与当前路由匹配。