这几天在公司接触了一个后台框架 vue-vben-admin 打开得时候，感觉页面和效果的做的不错。就想这看看是怎么做的。

折腾了两天才渐渐有点感觉，开始第一次接触还是点蒙，怎么做的 官网地址是Vben Admin

 官网运行命令

git clone https://github.com/vbenjs/vue-vben-admin-doc

# 安装依赖
yarn

# 运行项目
yarn dev

 不出意外，就能正常运行的跑起来

左侧菜单如何增加的问题。

在 src/router/routes/modules  增加一个 .ts 文件 会被视为一个路由模块，相应也得也会在左侧生成一个菜单 有很多注意的地方，要不然很容易出现404 或者加载错误的问题。

测试增加一个路由模块 代码如下

import type { AppRouteModule } from '/@/router/types';

import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const test: AppRouteModule = {
  path: '/test',     这个是父级菜单路径
  name: 'Test22', 父级菜单名称其名称不可重复
  component: LAYOUT,
  redirect: '/test/test', 链接跳转地址 需要在children里面path 一个地址，cheldren不存在会报错
  meta: {
    icon: 'simple-icons:about-dot-me', 菜单的图标
    title: t('测试路由'),   //菜单的名字
    orderNo: 100000,  //菜单的排列序号
  },
  children: [       //父级菜单的子菜单
    {
      path: 'test', //子菜单路径前面不需要加/
      name: 'test',  //子菜单名称 不可重复
      component: () => import('/@/views/test/test1/test.vue'), //加载视图文件 注意这个文件需要放在

一个文件夹呢，不能有其他vue视图文件 否则报错，找不到问题，例如菜单2是test2文件，菜单是1test1文件夹需要分开放
      meta: {
        title: t('测试'), //子菜单名称
      },
    },
    {
      path: 'test2',
      name: 'test2',
      component: () => import('/@/views/test/test2/test2.vue'),
      meta: {
        title: t('测试2'),
      },
    },
  ],
};

export default test;