ByteNoteByteNote
字

字节笔记本

2026年2月22日

Hooks-Admin：基于 React 18 的现代化后台管理框架

#开源工具

本文介绍 Hooks-Admin，一个基于 React 18 技术栈的现代化后台管理框架。该项目采用最新的前端技术，提供了完整的企业级后台管理解决方案，帮助开发者快速搭建高效、美观的管理系统。

项目简介

Hooks-Admin 是一个开源的后台管理框架，由 HalseySpicy 开发维护。截至目前，该项目在 GitHub 上已获得 2k+ stars 和 438 个 forks。项目完全采用 TypeScript 开发，提供了类型安全的代码支持。

该项目基于 React 18 生态系统构建，集成了 Redux 状态管理、React Router v6 路由管理、Vite2 构建工具以及 Ant Design UI 组件库，为开发者提供了一套完整的企业级后台管理解决方案。

核心特性

  • 最新技术栈：采用 React 18、React-Router v6、React-Hooks、TypeScript、Vite2 开发
  • 高效构建工具：使用 Vite2 作为项目开发和打包工具，配置了 Gzip 打包、跨域代理、打包预览等功能
  • 完整 TypeScript 支持：整个项目集成 TypeScript，提供完整的类型支持
  • 状态管理方案：集成 Redux，支持 immer、react-redux、redux-persist 开发
  • 双版本状态管理：master 分支使用 redux，redux-toolkit 分支使用 redux-toolkit
  • Axios 二次封装：使用 TypeScript 对 Axios 进行二次封装，包含错误拦截、常用请求封装、全局请求 Loading、取消重复请求等功能
  • 主题与国际化：支持 Antd 组件大小切换、暗黑/灰色/色弱模式、i18n 国际化
  • 权限管理：使用自定义高阶组件进行路由权限拦截（403 页面）、页面按钮权限配置
  • 路由功能：支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航
  • 代码规范：使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范
  • Git 提交规范：使用 husky、lint-staged、commitlint、commitizen、cz-git 规范提交信息

技术栈

技术版本用途
React18.x核心框架
React Routerv6路由管理
TypeScript4.x+类型系统
Vite2.x构建工具
Ant Design4.x/5.xUI 组件库
Redux / Redux Toolkit4.x / 1.x状态管理
Axios0.xHTTP 请求
Less-CSS 预处理器

安装指南

前置要求

  • Node.js >= 16
  • npm 或 yarn 或 pnpm

克隆项目

bash
# 使用 Gitee 克隆
git clone https://gitee.com/HalseySpicy/Hooks-Admin.git

# 或使用 GitHub 克隆
git clone https://github.com/HalseySpicy/Hooks-Admin.git

安装依赖

bash
cd Hooks-Admin
npm install

# 如果 npm install 失败，可尝试使用淘宝镜像
npm install --registry=https://registry.npm.taobao.org

启动开发服务器

bash
npm run dev
# 或
npm run serve

构建项目

bash
# 开发环境
npm run build:dev

# 测试环境
npm run build:test

# 生产环境
npm run build:pro

项目结构

text
Hooks-Admin
├─ .vscode              # vscode 推荐配置
├─ public               # 静态资源文件（忽略打包）
├─ src
│  ├─ api               # API 接口管理
│  ├─ assets            # 静态资源文件
│  ├─ components        # 全局组件
│  ├─ config            # 全局配置项
│  ├─ enums             # 项目枚举
│  ├─ hooks             # 常用 Hooks
│  ├─ language          # 语言国际化
│  ├─ layouts           # 框架布局
│  ├─ routers           # 路由管理
│  ├─ redux             # redux store
│  ├─ styles            # 全局样式
│  ├─ typings           # 全局 ts 声明
│  ├─ utils             # 工具库
│  ├─ views             # 项目所有页面
│  ├─ App.tsx           # 入口页面
│  ├─ main.tsx          # 入口文件
│  └─ env.d.ts          # vite 声明文件
├─ .editorconfig        # 编辑器配置（格式化）
├─ .env                 # vite 常用配置
├─ .env.development     # 开发环境配置
├─ .env.production      # 生产环境配置
├─ .env.test            # 测试环境配置
├─ .eslintrc.js         # Eslint 校验配置
├─ .prettierrc.js       # prettier 配置
├─ .stylelintrc.js      # stylelint 样式格式化配置
├─ CHANGELOG.md         # 项目更新日志
├─ commitlint.config.js # git 提交规范配置
├─ index.html           # 入口 html
├─ LICENSE              # 开源协议文件
├─ package.json         # 依赖包管理
├─ tsconfig.json        # typescript 全局配置
└─ vite.config.ts       # vite 配置

代码规范

项目集成了完整的代码规范工具链：

bash
# ESLint 检测代码
npm run lint:eslint

# Prettier 格式化代码
npm run lint:prettier

# Stylelint 格式化样式
npm run lint:stylelint

# 提交代码（会自动执行 lint:lint-staged 命令）
npm run commit

在线预览

项目截图

登录页

项目提供亮暗两种主题模式的登录页面，界面简洁美观。

首页

首页展示数据仪表盘，支持多种数据可视化组件，整体布局清晰合理。

浏览器支持

IEEdgeFirefoxChromeSafari
不支持最近 2 个版本最近 2 个版本最近 2 个版本最近 2 个版本

推荐使用 Chrome 最新版浏览器进行本地开发。

后台接口

项目后台接口完全采用 Mock 数据，支持以下 Mock 平台：

开源协议

本项目基于 MIT 协议开源。

项目链接

开源工具
上一篇

Halolight：基于 Next.js 14 的企业级管理后台模板

下一篇

Hooks-Admin：基于 React 18 的现代化后台管理框架

分享: