Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cszo/react18-antd5-template
React admin template based on the latest front-end technologies such as react18 and antd5
https://github.com/cszo/react18-antd5-template
ahooks antd5 axios cssinjs cssmodules emotion pro-components react-router-v6 react18 redux-toolkit typescript vite4
Last synced: about 13 hours ago
JSON representation
React admin template based on the latest front-end technologies such as react18 and antd5
- Host: GitHub
- URL: https://github.com/cszo/react18-antd5-template
- Owner: cszo
- Created: 2023-07-06T05:51:36.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-31T09:35:38.000Z (about 1 year ago)
- Last Synced: 2024-09-21T03:03:33.249Z (4 days ago)
- Topics: ahooks, antd5, axios, cssinjs, cssmodules, emotion, pro-components, react-router-v6, react18, redux-toolkit, typescript, vite4
- Language: TypeScript
- Homepage: https://cszo.github.io/react18-antd5-template/
- Size: 6.33 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react18-antd5-template
致力打造成一个基于新版主流技术的React中后台模版 [预览地址](https://cszo.github.io/react18-antd5-template)
Continuously optimizing！
Continuously exploring best practices！
Continuously integration of popular technology solutions for middle and back-end web systems！
Due to my limited skills 🤏 Welcome to star、fork、PR、or make your valuable suggestions 👏👏
## 主要技术栈
`react18`、`redux-toolkit`、`vite4`、`antd5`、`ahooks`、`pro-component`、`typescript`、`react-router-dom6`、`css modules`、`css in js`、`emotion`、`axios`
- [ReactJS](https://react.dev/)
- [Redux-Toolkit](https://redux-toolkit.js.org/introduction/getting-started)
- [Vite](https://vitejs.dev)
- [Antd](https://ant.design)
- [ahooks](https://ahooks.js.org/)
- [Pro-Components](https://procomponents.ant.design/components)
- [TypeScript](https://www.typescriptlang.org)
- [React-Router](https://reactrouter.com/en/main)
- [Axios](https://axios-http.com/docs/intro)
- [emotion](https://emotion.sh/docs/introduction)
## lint工具
- [ESLint](https://eslint.org)
- [Prettier](https://prettier.io)
## 目录结构
```markdown
react18-antd5-template
├─src
| ├─components // 公共组件
| ├─features // 业务组件(基于redux)
| ├─hooks // 公共hooks
| ├─layouts // 页面布局
| ├─mock // mock数据
| ├─pages // 业务页面
| ├─routes // 路由配置
| ├─types // 一些ts类型
| ├─utils // 工具函数
| ├─store.ts // redux store
|
├─tsconfig.json // ts配置
├─vite.config.ts // vite配置
```
### 开始
- 安装依赖
```bash
pnpm install
```
- 本地启动项目
```bash
pnpm dev
```
- 生产环境打包
```bash
pnpm build:prod
```
### 提交格式
- `feat`: 新增功能
- `fix`: 修复 bug
- `docs`: 仅仅修改了文档，比如 README, CHANGELOG 等等
- `test`: 增加/修改测试用例，包括单元测试、集成测试等
- `style`: 修改了空行、缩进格式、引用包排序等等（不改变代码逻辑）
- `perf`: 优化相关内容，比如提升性能、体验、算法等
- `refactor`: 代码重构，「没有新功能或者 bug 修复」
- `chore`: 改变构建流程、或者增加依赖库、工具等
- `revert`: 回滚到上一个版本
- `merge`: 代码合并