antd+vue3菜单配置

Ant Design Vue (简称"antdv") 是基于 Vue.js 的 Ant Design 开发工具集，它提供了一套丰富的 UI 组件，包括响应式导航菜单（Menu）。在 Vue3 中配置 antd 的 Menu 非常直观。

首先，你需要安装 antd 和 ant-design-vue 的依赖：

npm install @ant-design/icons antd antd-vue

然后，在你的 Vue 项目中，导入并配置 Menu 组件：

<template>
  <a-menu :default-selected-keys="['1', '2']">
    <a-menu-item key="1">导航一</a-menu-item>
    <a-submenu key="2" title="导航二">
      <a-menu-item key="2-1">子导航一</a-menu-item>
      <a-menu-item key="2-2">子导航二</a-menu-item>
    </a-submenu>
  </a-menu>
</template>

<script setup>
import { Menu } from "ant-design-vue";
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    AMenu: Menu,
    AMenuItem: Menu.Item,
    ASubmenu: Menu.SubMenu,
  },
  data() {
    return {
      defaultSelectedKeys: ['1', '2'], // 默认选中项
    };
  },
});
</script>

在这个例子中，`default-selected-keys`属性用于设置默认选中的菜单项。`<a-menu>`是顶级菜单，而 `<a-submenu>`用于创建子菜单。