react+andDesign+vite+ts从零搭建后台管理系统

依赖版本

1. node 版本22.18.0
2. vite 版本7.0.4
3. typescript 版本5.8.3
4. react 版本18.3.11
5. react-router-dom 版本7.7.1
6. zustand 版本5.0.8
7. antd 版本5.26.7
8. axios 版本1.11.0

环境搭建

• npm create vite@latest
• npm i react-router-dom antd axios zustand

项目目录

report-ui
├─ .vscode # vscode推荐配置
├─ public # 静态资源文件（忽略打包）
├─ src
│ ├─ api # API 接口管理
│ ├─ assets # 静态资源文件
│ ├─ components # 全局组件
│ ├─ config # 全局配置项
│ ├─ enums # 项目枚举
│ ├─ hooks # 常用 Hooks
│ ├─ layouts # 框架布局
│ ├─ routers # 路由管理
│ ├─ store # zustand store
│ ├─ styles # 全局样式
│ ├─ typings # 全局 ts 声明
│ ├─ utils # 工具库
│ ├─ views # 项目所有页面
│ ├─ App.tsx # 入口页面
│ ├─ main.tsx # 入口文件
│ └─ vite-env.d.ts # vite 声明文件
├─ .env.dev # 开发环境配置
├─ .env.pro # 生产环境配置
├─ .env.test # 测试环境配置
├─ .gitignore # git 提交忽略
├─ .eslintignore # 忽略 Eslint 校验
├─ .prettierignore # 忽略 prettier 格式化
├─ .prettierrc.js # prettier 配置
├─ index.html # 入口 html
├─ package-lock.json # 依赖包包版本锁
├─ package.json # 依赖包管理
├─ README.md # README 介绍
├─ tsconfig.json # typescript 全局配置
└─ vite.config.ts # vite 配置

layouts结构

路由router

全局状态管理zustand store

config axios封装