md/vue/vue3 Ant框架.md

vue3 使用ant

在 vue3 项目中新增 antd

此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增

1. 安装 ant to vue3

通过 yarn 或者 npm 进行安装 ant

    yarn  add ant-design-vue@next
    
    # OR
    
    npm i --save ant-design-vue@next

!!! 如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 vue3.0 方法进行引用会在浏览器内提示 Cannot read property 'use' of undefined ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用 ant 官方安装方法

    npm install ant-design-vue --save
    yarn add ant-design-vue

2. vue3 中,配置 ant

全局配置ant 在vue3中全局挂载模块和vue2中有一点区别,但是基本差不多

编辑 src 目录下的 main.js ,使用 app.use 来进行导入,支持链式调用

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
const app = createApp(App);
app.use(Antd);//此处为引用antd 
app.mount("#app");

// 也可以按照下面方式进行引用,xxx为模块
createApp(app).use(xxx).use(xxx).use(Antd)

vue3 递归渲染 ant 框架的 sidebar

思路解析

侧边栏部分可以使用 ant 的布局 Layout 来实现,配合 ant 的 导航菜单 a-menu 子菜单使用

文件结构

示例代码

踩过的坑

多看文档,ant文档地址

1. 操作一个菜单其他菜单会一起响应. 解决方法: 此时需要给每一个 a-menu-item 以及 a-sub-menu 设置 key 值

2. 渲染出来的子菜单栏在侧边栏旁边生成 解决方法: 在创建 a-menu 组件时设置属性 mod 为 inline

   <a-menu mode="inline"> 其他组件 </a-menu>