text: Title: 【项目推荐】Vue Vben Admin ，一个基于vite+vue3+antd的免费开源的中后台模版
  Body: ## 推荐项目
  
  <!-- 这里是 HelloGitHub 月刊推荐项目的入口，欢迎自荐和推荐开源项目，唯一要求：请按照下面的提示介绍项目。-->
  
  
  <!-- 点击上方 “Preview” 立刻查看提交的内容 -->
  
  
  <!--仅收录 GitHub 上的开源项目，请填写 GitHub 的项目地址-->
  - 项目地址：https://github.com/vbenjs/vue-vben-admin
  
  <!--请从中选择（C、C#、C++、CSS、Go、Java、JS、Kotlin、Objective-C、PHP、Python、Ruby、Rust、Swift、其它、书籍、机器学习）-->
  - 类别：JS
  
  <!--请用 20 个左右的字描述它是做什么的，类似文章标题让人一目了然 -->
  - 项目标题：Vue Vben Admin ，一个基于vite+vue3+antd的免费开源的中后台模版
  
  <!--这是个什么项目、能用来干什么、有什么特点或解决了什么痛点，适用于什么场景、能够让初学者学到什么。长度 32-256 字符-->
  - 项目描述：Vue Vben Admin ，一个基于vite+vue3+antd的免费开源的中后台模版，内置通用化的组件以及基于组合式api的通用hooks， 极具学习价值。并且可以开箱即用，快速搭建中后台项目。
  
  <!--令人眼前一亮的点是什么？类比同类型项目有什么特点！-->
  - 亮点：1. 项目中拥有中后台开发需要的全量组件；2. 基于前端目前最新的技术栈：vue3 + vite ; 3. 前端交互非常流畅，且添加了很多赏心悦目的动效；4. 对新手优化，新手可以基于简版的项目，逐步迭代；5. 支持桌面端部署。
  
  - 示例代码：监听视窗变化的hook
  ```js
  import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
  import { useDebounceFn } from '@vueuse/core';
  
  interface WindowSizeOptions {
    once?: boolean;
    immediate?: boolean;
    listenerOptions?: AddEventListenerOptions | boolean;
  }
  
  export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
    let handler = () => {
      fn();
    };
    const handleSize = useDebounceFn(handler, wait);
    handler = handleSize;
  
    const start = () => {
      if (options && options.immediate) {
        handler();
      }
      window.addEventListener('resize', handler);
    };
  
    const stop = () => {
      window.removeEventListener('resize', handler);
    };
  
    tryOnMounted(() => {
      start();
    });
  
    tryOnUnmounted(() => {
      stop();
    });
    return [start, stop];
  }
  ```
  
  - 截图：![示例](https://camo.githubusercontent.com/54505ac7198981205151e84a87a2620a9bdd2f243e0081120f49f7b4bc23eebf/68747470733a2f2f616e6e6377622e6769746875622e696f2f616e6e6377622f696d616765732f70726576696577322e706e67)
  - 后续更新计划：
  
  