md/vue/vue3_Ant框架.md

vue3 使用ant

在 vue3 项目中新增 antd

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

1. 安装 ant to vue3

通过 yarn 或者 npm 进行安装 ant

yarn

    yarn add ant-design-vue@next

npm

    npm i --save ant-design-vue@next

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

ant官方安装方法

yarn

    yarn add ant-design-vue

npm

    npm install ant-design-vue --save

2. vuecli 中全局配置 ant

全局配置ant 在vue3中全局挂载模块和vue2中有一点区别, 区别不大

vue3方案

编辑 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)

vue2方案

编辑src目录下的main.js文件.在创建好的情况下加入下面语句

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
// 全局注册导入antd.
Vue.use(Antd)

递归渲染 sidebar

1. 思路解析

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

<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>

如上方代码显示的结构将会显示成下方结构,通过递归循环渲染此结构即可实现递归渲染

---

目录1

目录2

子目录1 子目录2

2. 目录与数据结构

[!tip] 该目录数据结构与vueRouter自动注册中的数据结构基本一致.

1. 文件夹目录结构,创建 主要使用 sidebar.js url app.js components sidebars sidebar.js

2. 示例数据结构

   [
   {
       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 中的内容

<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的内容

<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文档地址

1. 操作一个菜单其他菜单会一起响应. 解决方法: 此时需要给每一个 a-menu-item 以及 a-sub-menu 设置 key 值 通过给组件设置 mykey 属性赋值给 key 值
2. vue2好像就是这么整的

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

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

侧边栏配合vueRouter

[!tip] 确保已经使用vue-router 关于使用vue-router的方法可以查看 官方文档 或者 我的vueRouter瞎整