📊 react-admin-tp 后台管理系统项目模版

react-typescript 后台管理系统项目模版内置 动态路由、动态路由菜单、动态面包屑、数据 mock、tailwindcss、🌙 暗夜模式、schemaForm 组件。 EN

构建工具任选 webpack vite rsbuild

推荐使用脚手架安装模版 react-tp-cli

主要依赖库

• axios
• swr
• tailwindcss
• ant-design
• zustand

---

打包/开发相关

• 打包入口文件 (./scripts)
  • webpack.config.js
  • vite.config.ts
  • rsbuild.config.ts
• xxxx.config.js 不同环境打包配置
• 请求代理 devServer.proxy
• src\api\request.ts 可添加请求拦截相关处理逻辑

---

环境变量

• .env 全局环境变量
• .env.xxxx 动态环境变量

新增环境需要在 scripts 里配置相应指令 cross-env NODE_ENV=(你的环境名)
环境变量文件 你的环境名.config.js .env.你的环境名 即可自动加载

---

动态路由配置

// 动态路由配置参考
GLOBAL_ROUTERS.APP_PAGE;

// 调用这方法设置你的动态路由配置
const setDynamicRoutes = useRootStore((store) => store.setDynamicRoutes);
setDynamicRoutes(GLOBAL_ROUTERS.APP_PAGE);

---

项目结构

• api 接口相关
• assets 资源文件
• components 公用组件
• config 公用参数
• layout 公用布局
• mock 模拟数据
• pages 路由页面
• router 路由表 嵌套路由组件
• store
• types
• utils

需要安装 ESLint、Tailwind CSS IntelliSense 插件（墙裂推荐安装）
环境变量和打包配置动态加载
安装完项目依赖后再提交代码，保持项目整洁
homepage 相关文件、构建指令皆可删除

---

安装依赖

// 没有pnpm的话先安装pnpm
npm i pnpm -g

// 安装依赖
pnpm i

---

项目启动

// dev
pnpm start

// pro
pnpm build

---

常见问题

• 修改路由后无法正常工作
  • 清空 localStorage 重置路由配置

---

仓库地址 issue ☹ star ★