Vben-Admin纪录片

神佑我乱鲨
1,924 阅读4分钟

一、介绍

  • Vben-Admin是一个后台解决方案，开箱即用
  • 二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功
  • 主要技术栈：Vue3.0、Vite、 Ant-Design-Vue、TypeScript
  • 文档地址：传送门

二、环境准备

  • 本地环境需要安装 Yarn1.x、Node.js 和 Git

三、目录说明

框架设计的比较全面，所以可能会看起来有点复杂

├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # 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 # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

四、项目配置

  • 环境变量配置在.env、.env.development、.env.production中，根据不同环境区分；通过import.meta.env.XXX 调用；也可以使用 src/hooks/setting/index.ts 提供的函数来进行获取
  • 当前项目的配置文件在 src/settings/projectSetting.ts；权限模式、会话超时方案、主题色.....

五、路由系统

  • 项目路由配置存放于 src/router/routes 下面。 src/router/routes/modules用于存放路由模块，在该目录下的文件会自动注册。
  • 开发新页面时，按照已有的路由模块进行创建即可
  • 项目中采用的是重定向方式 useRedo 在src/hooks/web/usePage下
  • 页面跳转 useGo 在src/hooks/web/usePage下
  • 页面开启缓存 在 src/settings/projectSetting.ts 内将openKeepAlive 设置为 true；路由设置 name，且不能重复；路由对应的组件加上 name，与路由设置的 name 保持一致
  • 页面不缓存 router.meta 新增属性ignoreKeepAlive: false

六、菜单

  • 项目菜单配置存放于 src/router/menus 下面 并且 菜单和路由匹配才能显示
  • 同路由一样，src/router/menus/modules 内新增一个模块文件会自动生成菜单

七、权限控制

  1. 通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置
    • 路由文件中meta属性下的roles为PermissionModeEnum.ROLE
    • 动态过滤路由：src/store/modules/permission.ts
    • usePermission 用来切换角色权限
  2. 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成
    • 路由文件中meta属性下的roles 为PermissionModeEnum.ROUTE_MAPPING
    • 动态过滤路由：src/store/modules/permission.ts
    • usePermission 用来切换角色权限
  3. 通过后台来动态生成路由表(后台方式控制)
    • 路由文件中meta属性下的roles为 PermissionModeEnum.BACK
    • 动态过滤路由：src/store/modules/permission.ts
    • usePermission 用来切换角色权限

八、Mock及跨域处理

九、Axios

  • Axios初始化时并未传入baseUrl，而是在初始化时在requestOptions里传入了apiUrl属性
  • 并且调用axios.request方法时进入beforeRequestHook 方法中做了处理；同时还有transformRequestData等

九、国际化

  • 在 src/settings/localeSetting.ts 内可以配置默认语言
  • 语言文件
    • 在 src/locales/lang/ 可以配置具体的语言
    • 在 src/locales/setupI18n.ts 内会自动引入的lang下的当前语言配置文件
import { genMessage } from '../helper';
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
import momentLocale from 'moment/dist/locale/zh-cn';

const modules = import.meta.globEager('./zh_CN/**/*.ts');
export default {
  message: {
    ...genMessage(modules, 'zh_CN'),
    antdLocale,
  },
  momentLocale,
  momentLocaleName: 'zh-cn',
};
  • lang/zh_CN/components/modal.ts 的文件内容为 { title: '标题' } => 则在使用的使用直接使用 t('components.modal.title') 进行获取。
  • 使用：引入项目自带的 useI18n import { useI18n } from '/@/hooks/web/useI18n'; const { t } = useI18n(); const title = t('components.modal.title');
- 切换语言：需要使用src/locales/seLocale.ts
import { useLocale } from '/@/locales/useLocale';
const { changeLocale } = useLocale();
changeLocale('en');

十、缓存模块

  • 项目初始化时 通过 initAppConfigStore 来注入缓存系统；initAppConfigStore会 import Persistent
  • Persistent文件被引入时执行initPersistentMemory 方法，再通过localMemory.resetCache(localCache) 初始化
  • 此时local缓存会通过resetCache方法，并根据是否过期好更新到localMemory的cache对象上
  • 当调用Persistent.setLocal方法时，会将缓存更新到localMemory的cache对象上；此时所有的缓存在cache上
  • 同理 Persistent文件中 通过window监听 beforeunload事件，并在回调中将cache保存到localstorage等缓存中
avatar
文章
阅读
粉丝