# `vue3` 使用ant
## 在 `vue3` 项目中新增 `antd`
> 此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增
### 1. 安装 ant to vue3
通过 `yarn` 或者 `npm` 进行安装 `ant`
<!-- tabs:start -->
#### **yarn**
```shell
    yarn add ant-design-vue@next
```
#### **npm**
```shell    
    npm i --save ant-design-vue@next
```
<!-- tabs:end -->

>[!Warning] 
>如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用  `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用
> 20210907: [官方支持vue3的文档](https://2x.antdv.com/docs)

#### `ant`官方安装方法
<!-- tabs:start -->
#### **yarn**
```shell
    yarn add ant-design-vue
```
#### **npm**
```shell
    npm install ant-design-vue --save
```
<!-- tabs:end -->

### 2. `vuecli` 中全局配置 `ant`
> 全局配置ant
> 在vue3中全局挂载模块和vue2中有一点区别, 区别不大
<!-- tabs:start -->
### **vue3方案**
编辑 `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)
```
### **vue2方案**

编辑`src`目录下的`main.js`文件.在创建好的情况下加入下面语句
```js
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
// 全局注册导入antd.
Vue.use(Antd)
```

<!-- tabs:end -->
## 递归渲染 `sidebar`
#### 1. 思路解析
侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的导航菜单 `a-menu` 子菜单使用 `a-sub-menu` 来实现多层级
```html
<a-menu>
    <a-menu-item>目录1</a-menu_item> 
    <a-sub-menu title="目录2">
        <a-menu-item>子目录1</a-menu-item>
        <a-menu-item>子目录2</a-menu-item>
    </a-sub-menu>
</a-menu>
``` 
如上方代码显示的结构将会显示成下方结构,通过递归循环渲染此结构即可实现递归渲染 
<hr/>
 目录1
<details>
<summary> 目录2 </summary>
<option>子目录1</option>
<option>子目录2</option>
</details>

#### 2. 目录与数据结构
> [!tip] 
> 该目录数据结构与[vueRouter自动注册](../vue/vue_router.md)中的数据结构基本一致.
1. 文件夹目录结构,创建 主要使用 sidebar.js
url
app.js
components
sidebars
sidebar.js
1. 示例数据结构
```javascript
[
    {
        text: '摄像头',// 页面标题
        is_menus: true,//是否为侧边栏的大项
        children: [
            {
                is_menu: true,
                text: '摄像头列表',
                path: '/cameraList',
                name: 'Home',
                component: Home
            },
            {
                is_menu: true,
                text: '录像',
                path: '/cameraVideo',
                name: 'Home',
                component: Home
            }
        ],
    },
    {
        text: '账户',
        is_menus: true,
        children: [
            {
                is_menu: true,
                text: '配置',
                path: '/user/config',
                name: 'Home',
                component: Home
            }
        ],
        
    },
    {
        title: '日志',
        is_menu: true,//路由项
        path: '/log',
        name: 'Log',
        text: '日志',
        component: Home
    },
    {
        title: '404页面',
        is_menu: false,//路由项
        path: '/:pathMatch(.*)*',
        name: 'Log',
        text: '日志',
        component: Home
    },
]
``` 
#### 3. 示例代码
在 `sidebarMenuItem.js` 中的内容
```jsx
<template>
    <a-menu-item v-if="menu.is_menu" :key="mykey">
        <router-link :to="menu.path">{{menu.text}}</router-link>
    </a-menu-item>
    <a-sub-menu v-if="menu.is_menus" :title="menu.text" :key="mykey">
        <sidebar-menu-item v-for="(item,i) in menu.children" :mykey="menu.path +'_'+item.path+'_'+i" :menu="item" :key="menu.path +'_'+item.path+'_'+i" ></sidebar-menu-item>
    </a-sub-menu>
</template>
<script>
export default {
    name: 'sidebar-menu-item',
    components: {
    },
    props: {
        menu: {
            type: Object,
            default: function (){
                return {}
            }
        },
        mykey: {
            type: String,
            default: ''
        }
    },
    mounted(){
        console.log(this.menu);
    }
}
</script>

<style>

</style>
```
在app.js中使用`sidebarMenuItem`的内容
```jsx
<template>
  <a-layout id="components-layout-demo-responsive" class="h-full">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo" />
      <a-menu mode="inline" >
        <!-- 此处为使用组件 menus为数组  -->
        <sidebarMenuItem  v-for="(item,i) in menus" :menu="item" :mykey="item.path + '_'+i" :key="'menu_'+item.path + '_'+i" />
      </a-menu>
    </a-layout-sider>
    <a-layout class="h-full flex">
      <a-layout-content>
        <router-view/>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">
        ant
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import sidebarMenuItem from './components/sidebars/sidebarMenuItem.vue'
export default {
  name: 'App',
  components: {
    sidebarMenuItem,
  },
  data(){
    return {
      menus: []
    }
  },
}
</script>
    
```

#### 4. 注意事项
> 多看文档,[ant文档地址](https://2x.antdv.com/components/overview-cn/)
1. 操作一个菜单其他菜单会一起响应.
    解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值 通过给组件设置 `mykey` 属性赋值给 `key` 值
2. vue2好像就是这么整的
3. 渲染出来的子菜单栏在侧边栏旁边生成
    解决方法: 在创建 `a-menu` 组件时设置属性 `mod` 为 `inline`
```jsx
    <a-menu mode="inline"> 其他组件 </a-menu>
```

## 侧边栏配合`vueRouter`
> [!tip]
> 确保已经使用`vue-router` 关于使用`vue-router`的方法可以查看
> [官方文档](https://router.vuejs.org/zh/installation.html)
> 或者 [我的vueRouter瞎整](../vue/vue_router.md)