# `vue3` 使用ant
## 在 `vue3` 项目中新增 `antd`
> 此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增
### 1. 安装 ant to vue3
通过 `yarn` 或者 `npm` 进行安装 `ant`

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


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

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

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

编辑 `src` 目录下的 `main.js` ,使用 `app.use` 来进行导入,支持链式调用
```javascript
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文档地址](https://2x.antdv.com/components/overview-cn/)
1. 操作一个菜单其他菜单会一起响应.
    解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值
3. 渲染出来的子菜单栏在侧边栏旁边生成
    解决方法: 在创建 `a-menu` 组件时设置属性 `mod` 为 `inline`
```jsx
    <a-menu mode="inline"> 其他组件 </a-menu>
```