/react-admin-template

使用React18、Antd5、ReactRouter6、Mobx6、Tailwind3、Vite4、Pnpm 搭建的后台管理系统模版

Primary LanguageTypeScript

react-admin-template 项目简介

技术体系

  • 核心：TypeScript(5x) + React18(18x) + ReactRouter(6x) + Mobx(6x)
  • UI：Ant Design(5x)
  • CSS：tailwind(3x)
  • HTTP 请求：Axios
  • 依赖管理：Pnpm
  • 国际化：i18next、react-i18next
  • 构建系统：Vite(4x)

三方插件

目录规划

|- dist // 构建成果
|- public
|- src
  |- api // api接口管理
  |- assets  // 静态资源
  |- components // 全局组件
  |- config // 全局配置
  |- enums // 枚举值
  |- hooks // 全局hooks，用于抽离公用逻辑
  |- lang // 国际化资源
  |- layout // 布局组件
  |- libs // 第三方插件
  |- request // axios封装
  |- router  // 路由
  |- store   // 状态
  |- utils   // 工具函数
  |- views   // 页面
  |- App.tsx  // 根组件
  |- main.tsx
|-type // ts类型

使用说明

# 安装依赖
pnpm install

# 开发环境启动
pnpm run serve
# 或
pnpm run dev

# 生产环境打包
pnpm run build

项目规范

  • 代码规范：eslint + pritter
  • 提交规范：githooks（husky）
  • api 接口约定（按照 views 页面分组进行接口抽离）
  • git 分支策略

项目实现的功能概览

  • 主题切换
  • 国际化

功能及 UI 参考

性能优化