一个React+ Monorepo搭建的后台管理模板「admin template」,在线预览https://hzdjs.cn/react-admin-vite-antd5 ,采用react,react18,vite,vite3,antd,antd5.x,ts,typescript,redux,react-redux,@reduxjs/toolkit。支持vite生成动态路由,支持路由keepalive功能。代码简介,致力打造成一个标准的模版,可直接用于生产环境开发。
MIT License
React
+Monorepo
搭建的后台管理模板「admin template」,在线预览https://hzdjs.cn/react-admin-vite-antd5
vite
生成动态路由,支持路由keepalive
功能#演示
Monorepo
管理项目随着研发代码的增多, 工程日益复杂,代码复用和版本管理显得格外的繁琐,版本升级没有日志,相互依赖的包需要手动管理版本,以往的组件库独立开发的方式并没有很好的区分组件和组件之间的关系,往往只需要一种类型的组件,例如图表,但还是不得不安装一整个组件库,并没有很好的对组件进行区分,如哪些是图表组件,哪些是功能组件,哪些是业务组件等,造成组件库越来越大,编译打包效率降低,每次一个小改动就不得不直接发布一整个包预览效果,且无法支持本地调试等以下相关痛点
lodash
,moment
...bug
困难node
、node-sass
、webpack
等基础依赖版本不统一,切换增加心智负担less
,sass
Monorepo
的概念,把以往的单一组件库拆分为职责更细化的包,架构更清晰,解耦,子应用隔离monorepo
架构之上,pnpm
能极大发挥他的作用(设计初期就很好的考虑了当前复杂项目的痛点),相比 yarn
和 npm
,pnpm
能节约磁盘空间并提升安装速度,切避免了关于深度嵌套包的一些意外情况,如果你还没有接触了解过 pnpm
,可以看看相关文章, 而且当前已有众多前端团队和大部分主流开源项目抛弃 npm
,yarn
,开始接入 pnpm
react
,react18
,vite
,vite3
,antd
,antd5.x
,ts
,typescript
,redux
,react-redux
,@reduxjs/toolkit
treer
treer -e ./result.txt -i '/node_modules|.git/'
react-admin-vite-antd5
├─packages // 公共包存放路径
| ├─utils // 公共工具
| ├─ui // ui 组件库
| ├─store // 全局状态管理
| ├─hooks // 公共 hooks
| ├─eslint-config-custom // 全局 eslint
| ├─components // 公共业务组件
├─apps // 项目存放路径
| ├─demo // 示例项目
| ├─admin // 后台管理 app
| | ├─src // 主文件
| | | ├─routes // 路由
| | | ├─pages // 页面
| | | ├─components // 组件
| | | ├─common // 公共资源
| | | ├─assets 静态资源
| | ├─react-admin-vite-antd5 // 打包出口
├─.husky // 代码提交脚本
Layout
公共布局组件eslint
统一管理,所有package
统一引入react hooks
,比如KeepAlive
redux
,store
树,提供useSelector
,useDispatch
base.json
,vite.json
ui
组件和components
不一样的地方就是ui
只专注纯组件开发,不带业务git clone https://github.com/frontend-winter/react-admin-vite-antd5
cd react-admin-vite-antd5
git init
pnpm install
pnpm run dev
pnpm build
pnpm build:sit
nginx
部署# 后台管理模板
location ^~ /react-admin-vite-antd5{
index index.html;
if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
#设置过期时间120秒,120秒过后向服务器重新请求数据
add_header Cache-Control max-age=120;
}
if ($request_filename ~* ^.*[.](html|htm)$) {
add_header Cache-Control "public, no-cache";
#html文件协商缓存,也就是每次都询问服务器,浏览器本地是是否是最新的,是最新的就直接用,非最新的服务器就会返回最新
}
try_files $uri $uri/ /react-admin-vite-antd5/index.html;
}
pnpm run lint && pnpm run format
feat
: 新增功能fix
: 修复 bugdocs
: 仅仅修改了文档,比如 README, CHANGELOG 等等test
: 增加/修改测试用例,包括单元测试、集成测试等style
: 修改了空行、缩进格式、引用包排序等等(不改变代码逻辑)perf
: 优化相关内容,比如提升性能、体验、算法等refactor
: 代码重构,「没有新功能或者 bug 修复」chore
: 改变构建流程、或者增加依赖库、工具等revert
: 回滚到上一个版本merge
: 代码合并This project is licensed under the MIT License. .