# react-vite-ts-app-null

**Repository Path**: shixinde/react-vite-ts-app-null

## Basic Information

- **Project Name**: react-vite-ts-app-null
- **Description**: react 快速开发框架，超快技术配置
Vite + TS + React + React Router Dom + React Query + Zustand + Biome + Husky + Commitlint + @shixinde/guoguo-cz

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-11
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- @format -->

# 项目介绍
## 项目启动
pnpm server
pnpm dev

## 无用依赖 - 本地数据库
> 可以选择删除 
> 删除内网穿透 ngrok-free.app
> 可选删除 [动画库 gsap](https://reactbits.dev/get-started/installation)

### 作者环境
> Node v22.14.0 <br />  
> npm v10.9.2
### Vite + TS + React + React Router Dom + React Query + Zustand + Biome + Husky + Commitlint + @shixinde/guoguo-cz

### 支持 Tailwind CSS

### 支持 Ant Design5 组件库

### 全局Loading  局部Loading

### 新页面 Basic 代码

### 支持主题色切换 【黑/白】 【主/辅色】

### 支持登录、注册

### 路由菜单、二级菜单

### 请求拦截器、响应拦截器

### 侧边栏

### 顶部导航栏

### 全局状态管理 【zustand】

### 代码格式化【Biome】
> 特性
> 1. 保存自动格式化
> 2. 可以手动格式化
>     pnpm lint  自动暂存，并格式化暂存的文件
>     pnpm lint:format  仅格式化暂存的文件
>     pnpm lint:fix 批量格式化 `src` 目录下的文件
> 3. 系统拦截，在执行commit的时候，系统会自动格式化后，再执行commit

### 代码调试路由 【/debugger】

### 路由守卫 【登录校验】

### 代码流程提交  【git cz】



### 代码提交信息校验 【commitlint + @shixinde/guoguo-cz】

### Vite 配置环境变量 ENV 【支持多服务器、多环境打包】 【dev / test / prod / ...】
> - .env.development
> - .env.test
> - .env.production
> - .env.xxx 【自定义环境变量】
支持.local 环境变量 【本地开发环境】
> - .env.development.local
> - .env.test.local
> - .env.production.local

### 全局请求 【react-query】
**层层递进、逐层封装**
> - request.ts 封装axios 请求方法 【第一次封装】
> - react-query.ts 封装react-query 请求方法  【第二次封装】
> - apis/*** 封装api 请求方法 【第三次封装】
> - views/*** 封装页面 逻辑方法 【页面使用 - 第四次封装】

### 全局异常处理 (code==1和特殊情况 消息提示前端处理, 其他code 消息提示后端处理) 

### 集成 Iconfont 图标

### Apifox 自动生成 Swagger api 文档  @shixinde/apifox-swagger
1. 生成文档 pnpm exportapi
2. 书写请求
   ```ts
    import { usePost } from '@/utils/react-query'
   
    export const usePostShop = () => {
    return usePost('/shop')
    }
   ```
3. 使用请求
   ```ts
    const { mutate: postShop, types } = usePostShop()
   
    // 类型测试 start
    types['Response']
    getTypes['Response']
    // 类型测试 end
   ```
4. 效果展示
 ![image-20250915150931588](https://aliyxd.oss-cn-beijing.aliyuncs.com/image-20250915150931588.png)

### 用户登陆信息存储 【UserInfo处理,Token处理】


# 进行中...

### 支持路由权限控制 

### 路由权限控制 【根据用户角色动态加载路由】

### OSS 使用