Ant Design Vue3 + TypeScript + Vite 左侧菜单生成

以下是一个使用Ant Design Vue3和Vite创建左侧菜单的简单示例：

首先，确保你已经安装了Ant Design Vue和Vite依赖。

npm install ant-design-vue@next
npm install vite

然后，你可以创建一个Vite项目并配置Ant Design Vue。

在vite.config.ts中配置Ant Design Vue：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import antDesign from 'unplugin-antd/vite';
 
export default defineConfig({
  plugins: [
    vue(),
    antDesign({
      // 如果你想要使用less，可以在这里开启
      less: true,
    }),
  ],
});

在main.ts中引入Ant Design Vue和相关样式：

import { createApp } from 'vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
 
const app = createApp(App);
 
app.use(antDesignVue);
app.mount('#app');

最后，在你的组件中创建左侧菜单：

<template>
  <a-layout>
    <a-layout-sider>
      <a-menu
        mode="inline"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        :menu="menu"
      >
        <template v-for="item in menu" :key="item.key">
          <a-menu-item v-if="!item.children" :key="item.key">
            <router-link :to="item.path">{{ item.title }}</router-link>
          </a-menu-item>
          <sub-menu v-else :menu-info="item" />
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <!-- 页面内容 -->
    </a-layout-content>
  </a-layout>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { MenuInfo } from './types';
 
const SubMenu = {
  name: 'SubMenu',
  props: ['menuInfo'],
  render() {
    return (
      <a-sub-menu key={this.menuInfo.key} >
        <template #title>{this.menuInfo.title}</template>
        {this.menuInfo.children?.map(subItem => (
          <a-menu-item key={subItem.key}>
            <router-link to={subItem.path}>{subItem.title}</router-link>
          </a-menu-item>
        ))}
      </a-sub-menu>
    );
  },
};
 
export default defineComponent({
  components: { SubMenu },
  setup() {
    const selectedKeys = ref<string[]>([]);
    const openKeys = ref<string[]>([]);
    const menu: MenuInfo[] = [
      {
        key: '1',
        title: 'Option 1',
        path: '/option1',
      },
      {
        key: '2',
        title: 'Option 2',
        children: [
          {
            key: '2-1',
            title: 'Sub Option 2-1',
            path: '/option2/suboption2-1',
          },
          {
            key: '2-2',