vue3 ant design 侧边栏

以下是使用Vue3和Ant Design Vue搭建侧边栏的示例：

首先，确保你已经安装了Vue和Ant Design Vue。然后，创建一个Vue项目并安装Ant Design Vue：

vue create my-project
cd my-project
npm install ant-design-vue@next

在你的Vue组件中，引入Ant Design Vue的侧边栏组件和样式：

import { Layout, Menu } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

然后，在你的模板中使用`Layout`和`Menu`组件来创建侧边栏布局：

<template>
  <Layout>
    <Sider>
      <Menu theme="dark" mode="inline">
        <Menu.Item key="1" icon="user">
          Option 1
        </Menu.Item>
        <Menu.Item key="2" icon="video-camera">
          Option 2
        </Menu.Item>
        <Menu.Item key="3" icon="upload">
          Option 3
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
  </Layout>
</template>

这是一个简单的侧边栏布局，你可以根据自己的需求进行修改和扩展。在这个示例中，我们使用了`Layout`组件来创建整体布局，`Sider`组件来创建侧边栏，`Menu`组件来创建菜单项。