跳到主要内容

介绍

ChikoAdmin 是一个基于 React19 的现代化中后台管理模板,采用最新的技术栈和最佳实践。它内置丰富的主题配置,并实现了自动化约定式路由系统。此外,还采用了基于 MSW 的本地 Mock 数据方案,前端开发者也可以轻松编写测试接口。

ChikoAdmin 为您提供一个完善的后台管理解决方案,开箱即用。同样也是一个快速学习 React 前言开发的最佳实践案例。

主要特性

  • 现代化技术栈: React19 + Vite + TypeScript + Ant Design。
  • 模块化架构: 基于功能模块化的目录结构,易于维护和扩展。
  • 项目架构: 基于 pnpm monorepo 架构,结构清晰明了,方便维护。
  • 主题定制: 支持亮色/暗色主题切换,丰富的主题配置选项。
  • 内置国际化: 以内置中文、英文,可快速扩展其他语种。
  • 约定式路由: 基于 BetterPagesCreate Vite 插件,根据文件结构自动生成路由。
  • 权限管理: 完整的权限控制系统,支持角色和菜单权限。
  • 响应式设计: 完美适配桌面端和移动端。
  • 开发体验: 热更新、类型检查、代码规范,提升开发效率。

在线预览

需要掌握的知识

基础知识

  • HTML/CSS: 网页结构和样式基础
  • JavaScript ES6+: 现代 JavaScript 语法和特性
  • TypeScript: 类型系统和面向对象编程
  • React 基础: 组件、Hooks、状态管理等核心概念

进阶知识

  • 状态管理: Redux Toolkit 的使用和最佳实践
  • 路由管理: React Router 的配置和动态路由
  • 构建工具: Vite 的配置和优化
  • CSS 框架: UnoCSS 的原子化 CSS 理念
  • UI 组件: Ant Design 组件的使用和定制

开发工具

  • 包管理器: pnpm 的使用和 workspace 管理
  • 代码规范: ESLint、Prettier 的配置
  • 版本控制: Git 的基本操作和分支管理
  • 调试工具: 浏览器开发者工具和 React DevTools

学习建议

  • 循序渐进: 先掌握 React 基础,再学习高级特性
  • 实践为主: 通过实际项目练习,加深理解
  • 查阅文档: 遇到问题时及时查阅官方文档

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

祝福与寄语

欢迎使用 ChikoAdmin!

希望这个项目能够帮助你:

  • 快速上手: 减少重复工作,专注于业务逻辑
  • 提升效率: 现代化的开发体验,让编码更愉快
  • 学习成长: 通过阅读源码,学习最佳实践
  • 创新思维: 基于此模板,创造更多优秀项目

致开发者

无论你是:

  • 初学者: 希望这个项目能成为你学习 React 的良师益友
  • 经验者: 希望这个项目能为你提供灵感和参考
  • 实践者: 希望这个项目能成为你项目的坚实基石

愿你在编程的道路上越走越远,创造出更多优秀的作品!