react-ts-vite-admin 的项目扩展与二次开发

1. 项目的基础介绍

react-ts-vite-admin 是一套基于最新技术栈的开源后台管理框架，采用了 React18、TypeScript、Mobx、Ant-Design、Vite 等技术进行构建。该项目旨在提供一个功能丰富、易于扩展的后台管理基础模板，适用于快速搭建企业级后台系统。

2. 项目的核心功能

• 技术栈更新：采用 React18、React-Router v6、AHooks、TypeScript、Vite4、Mobx 等最新技术。
• 开发工具：使用 Vite4 作为项目开发和打包工具，配置了 Gzip 打包、跨域代理、打包预览工具、按需字体压缩、样式前缀兼容等。
• 状态管理：使用 Mobx 进行状态管理，并集成 mobx-persist-store 进行开发。
• 请求封装：对 Axios 进行二次封装，包括错误拦截、常用请求封装、全局请求 Loading、取消重复请求等。
• 功能支持：支持 Antd 组件大小切换、暗黑模式、i18n 国际化，以及 KeepAlive 缓存页面。
• 路由管理：支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航。
• 代码规范：使用 Prettier 统一代码格式，集成 Eslint、Stylelint 代码校验规范。

3. 项目使用了哪些框架或库？

• 前端框架：React18
• 路由管理：React-Router v6
• 状态管理：Mobx
• UI组件库：Ant-Design
• 打包工具：Vite4
• TypeScript：TypeScript
• 代码格式化工具：Prettier
• 代码校验工具：Eslint、Stylelint

4. 项目的代码目录及介绍

项目的代码目录结构清晰，主要包括以下部分：

• public：静态资源文件，如入口 HTML 文件。
• src：项目源代码，包括：
  • assets：静态资源文件。
  • components：全局组件。
  • config：全局配置项。
  • hooks：常用 Hooks。
  • language：语言国际化。
  • layout：框架布局。
  • mobx：状态管理。
  • pages：路由页面。
  • patchPlugins：补丁插件等。
  • router：路由管理。
  • utils：全局工具方法。
  • styles：全局样式。
  • typings：全局 TypeScript 声明。
• .husky：git规范约束。
• .vscode：Visual Studio Code 推荐配置。
• 其他配置文件：如 .eslintrc.cjs、.prettierrc.cjs 等。

5. 对项目进行扩展或者二次开发的方向

• 功能扩展：根据业务需求，增加新的功能模块，如数据可视化、权限管理、工作流引擎等。
• 性能优化：针对项目进行性能优化，如代码分割、懒加载、服务端渲染等。
• 界面定制：根据品牌或用户需求，对界面进行定制，包括主题颜色、布局结构等。
• 国际化：完善国际化支持，增加更多语言选项。
• 安全性加强：增强项目的安全性，如增加登录认证、数据加密、防止XSS攻击等。
• 兼容性提升：优化项目在不同浏览器和设备上的兼容性。
• 文档完善：编写详细的开发文档和用户手册，方便开发者和用户使用。