Vben Admin 自学记录 —— 介绍及使用（持续更新中...）

Vben Admin 自学记录：

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.至此路由模块及子页面添加成功，修改后效果

Vben Admin 自学记录 —— 介绍及使用（持续更新中...）

Vben Admin 自学记录：

Vue-Vben-Admin

安装

目录说明

路由

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

猜你喜欢