ant design vue3好看的左侧菜单

Ant Design Vue3 提供了一个名为 `AntMenu` 的组件，它是一个美观且功能丰富的左侧菜单。使用 Ant Design 的菜单组件可以让你的Vue3应用拥有统一的UI风格，适合构建企业级后台管理界面。以下是创建一个好看且易用的左侧菜单的基本步骤：

1. 首先，安装依赖：在你的项目中安装 `@ant-design/icons-vue` 和 `@ant-design/components-vue` 这两个库。

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

2. 导入所需组件：

import { Menu } from '@ant-design/components-vue';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons-vue';

3. 创建左侧菜单结构：

<template>
  <div>
    <a-menu :default-active="activeIndex" :mode="mode">
      <a-menu-item key="1">
        <a-icon type={PlusOutlined} /> 新增
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type={SettingOutlined} /> 设置
      </a-menu-item>
      <!-- 更多菜单项 -->
      <template v-for="(item, index) in menuItems" :key="index">
        <a-menu-item :key="item.key">{{ item.title }}</a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1', // 默认激活的菜单项
      mode: 'vertical', // 水平或垂直布局，默认为垂直
      menuItems: [
        {
          title: '菜单1',
          key: '1'
        },
        {
          title: '菜单2',
          key: '2'
        }
        // 添加更多自定义菜单项
      ]
    };
  }
};
</script>

在这个例子中，你可以通过调整 `menuItems` 数组来自定义菜单项，并利用图标、标题等元素使其看起来更专业。`activeIndex` 属性用于控制默认展开的菜单项。