README.zh-CN.md

Language : 🇺🇸| 🇨🇳

QuickStart React Admin

企业级应用程序的快速启动的React模板的解决方案。

预览

预览地址：https://quickstart-react-admin.vercel.app/

功能

1. 支持登录、注销、密码重置功能
2. 支持个人中心，消息提醒、多语言动态切换
3. 支持左侧菜单的切换，路由对应的页面同样切换
4. 支持权限验证是否显示页面和菜单
5. 支持全屏模式切换
6. 支持App和Browser端自适应布局

技术

1. 支持carco.js作为应用配置工具
2. 支持tailwind css书写样式
3. 支持typescript编写code
4. 支持styled-components定义组件
5. 支持antd UI组件
6. 支持react-router v6
7. windows系统scroll bar样式优化
8. 支持redux存储数据并支持redux-toolkit简化redux开发
9. 支持docker一键部署

---

目录结构

├── README.md
├── craco.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favico.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── app
│   │   ├── api -- 后端接口
│   │   │   ├── notice.ts
│   │   │   └── user.ts
│   │   ├── components  -- 公共组件
│   │   │   ├── Brand.tsx
│   │   │   ├── Calendar.tsx
│   │   │   ├── Content
│   │   │   │   ├── AppContent.tsx
│   │   │   │   └── index.ts
│   │   │   ├── DatePicker.tsx
│   │   │   ├── Footer
│   │   │   │   ├── AppFooter.tsx
│   │   │   │   └── index.ts
│   │   │   ├── Header
│   │   │   │   ├── AppHeader.tsx
│   │   │   │   ├── Locales.tsx
│   │   │   │   ├── LoginTitle.tsx
│   │   │   │   ├── Notice.tsx
│   │   │   │   ├── UserProfile.tsx
│   │   │   │   └── index.ts
│   │   │   ├── Layouts
│   │   │   │   ├── MainLayout.less
│   │   │   │   ├── MainLayout.tsx
│   │   │   │   ├── UserLayout.less
│   │   │   │   ├── UserLayout.tsx
│   │   │   │   └── index.tsx
│   │   │   ├── Result
│   │   │   │   ├── NotFound.tsx
│   │   │   │   └── index.ts
│   │   │   ├── SiderBar
│   │   │   │   ├── AppSider.tsx
│   │   │   │   └── index.tsx
│   │   │   ├── TimePicker.tsx
│   │   │   ├── Welcome.tsx
│   │   │   └── index.ts
│   │   ├── hooks  -- 公共hooks
│   │   ├── pages  -- 业务系统页面
│   │   ├── redux 
│   │   │   ├── appStateSlice.ts
│   │   │   └── userLoginSlice.ts
│   │   ├── store.ts
│   │   ├── styleConstants.ts  -- 公共样式
│   │   └── types  -- 公共类型
│   │       ├── app.ts
│   │       ├── index.ts
│   │       └── user.ts
│   ├── assets  -- 资源
│   │   └── images
│   ├── globalConstants.ts  -- 公共配置
│   ├── index.tsx
│   ├── locales  -- 多语言配置
│   │   ├── en_US.json
│   │   ├── index.ts
│   │   └── zh_CN.json
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── routes   -- 路由
│   │   └── index.tsx
│   ├── scrollbar.ts 
│   ├── serviceWorker.js
│   ├── styles -- 样式
│   │   ├── app.less
│   │   ├── tailwind.css
│   │   └── variables.less
│   └── utils -- 公共工具类
│       ├── api.ts
│       ├── auth.ts
│       ├── index.ts
│       ├── request.ts
│       └── types.ts
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

启动方式

开发环境

$ mkdir <your-project-name>
$ cd <your-project-name>
$ yarn install
$ yarn start         # visit http://localhost:3000

生产环境

$ mkdir <your-project-name>
$ cd <your-project-name>
$ yarn build

在文件根目录查看前端资源输出文件夹: /dist

支持浏览器

Modern browsers.

Edge	Firefox	Chrome	Safari	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

贡献代码

欢迎贡献代码

• Submit issues to report bugs or ask questions.
• Propose pull requests to improve our code.