vue3 Element Plus中Menu写一个demo

在 Vue3 中，Element Plus 是基于 Vue 的一套响应式 UI 组件库，它提供了一个名为 `el-menu` 的菜单组件，用于构建导航栏。下面是一个简单的 Menu 示例：

首先，你需要安装 Element Plus 和 Vue3，然后导入所需的组件：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" class="menu-demo">
      <!-- 菜单项 -->
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
      <el-submenu index="/settings">
        <template slot="title">设置</template>
        <el-menu-item index="/settings/account">账户设置</el-menu-item>
        <el-menu-item index="/settings/security">安全设置</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script setup>
import { ElMenu, ElMenuItem } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
</script>

<style scoped>
.menu-demo {
  width: 200px;
}
</style>

在这个例子中：
1. `<el-menu>` 元素表示菜单容器，`:default-active="$route.path"` 表示默认选中的菜单项取决于当前路由路径。
2. `<el-menu-item>` 用于创建一级菜单项，`index` 属性指定 URL 或菜单ID。
3. `<el-submenu>` 创建一个可以折叠的子菜单，`index` 属性同样用于标识，内部的菜单项会作为子菜单展示。

记得先安装依赖并引入 Element Plus CSS 文件：

npm install element-plus

然后，在项目中引入样式文件：

<link rel="stylesheet" href="node_modules/element-plus/lib/theme-chalk/index.css" />