Vben Admin 自学记录：

• 介绍及使用
• Table组件的基本使用及练习
• Drawer组件的基本使用及练习
• Modal弹窗组件的基本使用及练习
• 路由跳转的基本使用及练习

Vue-Vben-Admin

一个基于 Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决方案，为开发中大型项目提供开箱即用的解决方案。

包含功能：

• 二次封装组件
• utils
• hooks
• 动态菜单
• 权限校验
• 按钮级别权限控制
• …

安装

1.拉取代码
从GitHub上

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

从Gitee上

git clone https://gitee.com/annsion/vue-vben-admin.git

用 pnpm install 安装依赖会报错，使用yarn安装不会有问题，原因是package.json中resolutions中第一个国内不支持安装

"resolutions": {
    "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
    "bin-wrapper": "npm:bin-wrapper-china",
    "rollup": "^2.56.3"
  },

安装好后启动项目

yarn run dev

目录说明

• build：打包脚本相关
  • config
  • generate
  • script
  • vite
• mock
• public
• src：主目录
  • api：接口文件
  • assets：资源文件
    • icons
    • images
    • svg
  • components：公共组件
  • disign：样式文件
  • directives：指令
  • enums：枚举/常量
  • hooks：hook
    • component
    • core
    • event
    • setting
    • web
  • layouts：布局文件
    • default
    • iframe
    • page
  • locales：多语言
  • logics：逻辑
  • main.ts：主入口
  • router：路由配置
  • settings：项目配置
    • componentSetting.ts
    • designSetting.ts
    • encryptionSetting.ts
    • localeSetting.ts
    • projectSetting.ts
    • siteSetting.ts
  • store：数据仓库
  • utils：工具类
  • views：页面
• test：测试
  • server：测试用到的服务
    • api
    • upload
    • websocket
• types：类型文件
• vite.config.ts：vite配置文件
• windi.config.ts：windcss配置文件

路由

在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。
例：src/router/routes/modules/dashboard.ts

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

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

const dashboard: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    orderNo: 10,
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
        // affix: true,
        title: t('routes.dashboard.analysis'),
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
      },
    },
  ],
};

export default dashboard;

练习 —— 添加一个新路由模块 test

1.在 src/router/routes/modules 下添加 test.ts

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

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

const testRoute: AppRouteModule = {
  path: '/testRoute',
  name: 'TestRoute',
  component: LAYOUT,
  redirect: '/testRoute/test1',
  meta: {
    orderNo: 20,
    icon: 'ion:grid-outline',
    title: t('routes.test.testRoute'),
  },
  children: [
    {
      path: 'test1',
      name: 'test1',
      component: () => import('/@/views/myComponents/test1.vue'),
      meta: {
        // affix: true,
        title: t('routes.test.test1'),
      },
    },
    {
      path: 'test2',
      name: 'test2',
      component: () => import('/@/views/myComponents/test2.vue'),
      meta: {
        title: t('routes.test.test2'),
      },
    },
    {
      path: 'test3',
      name: 'test3',
      component: () => import('/@/views/myComponents/test3.vue'),
      meta: {
        title: t('routes.test.test3'),
      },
    },
  ],
};

export default testRoute;

2.在 src/views/myComponents中添加三个test1~3的测试页面

<template>
    <div>
        test1...
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

页面呈现效果
3.在 src/locales/lang/zh-CN/routes 下添加 test.ts，设置路由title

4.至此路由模块及子页面添加成功，修改后效果