如何在 Vue 3 中使用 Ant Design

在Vue3中使用Ant Design Vue (AntD) 的 `SubMenu` 和 `MenuItem`，你需要先安装 AntD 的 Vue 版本。你可以通过npm或yarn进行安装： ```bash npm install @ant-design/icons antd vue@^3.0.0 # 或者 yarn add @ant-design/icons antd vue@^3.0.0 ``` 然后在你的Vue组件中引入并使用它们： ```html <template> <template #default> <a-menu :default-active-key="[&#39;1&#39;]" class="menu"> <a-submenu key="1" title="菜单名称"> <template slot="title">一级菜单</template> <a-menu-item v-for="(item, index) in menuItems" :key="index" :key-as="item.key"> <span slot="title">{{ item.name }}</span> </a-menu-item> </a-submenu> </a-menu> </template> </template> <script setup> import { Menu, SubMenu, MenuItem } from &#39;@ant-design/vue&#39;; const menuItems = [ { key: &#39;1&#39;, name: &#39;菜单项1&#39;, children: [ { key: &#39;1-1&#39;, name: &#39;子菜单项1&#39; }, { key: &#39;1-2&#39;, name: &#39;子菜单项2&#39; } ] }, // 其他菜单项... ]; const defaultActiveKey = [&#39;1&#39;]; export default { components: { Menu, SubMenu, MenuItem }, setup() { return { menuItems, defaultActiveKey }; } }; </script> ``` 在这个例子中，我们创建了一个自定义的Vue组件，包含一个 `SubMenu` 节点，其中嵌套了多个 `MenuItem` 来表示二级菜单。`v-for`指令用于遍历 `menuItems` 数组，并动态渲染每个菜单项。