# react-vite-admin

**Repository Path**: xiangshanxiumu/react-vite-admin

## Basic Information

- **Project Name**: react-vite-admin
- **Description**: react-vite-admin 是一个基于 React + TypeScript + Vite 构建的管理系统工程模板，提供了完整的管理系统基础架构，包括路由管理、状态管理、国际化、主题切换、权限管理（用户-角色-菜单权限）等常用功能。
springboot-web-admin 为对应配套的后端工程。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-09
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux, TypeScript, vite

## README




# react-vite-admin

## 介绍

react-vite-admin 是一个基于 React + TypeScript + Vite 构建的管理系统模板，提供了完整的管理系统基础架构，包括路由管理、状态管理、国际化、主题切换、权限管理等常用功能。

## 技术栈

- **前端框架**: React 18
- **构建工具**: Vite
- **语言**: TypeScript
- **UI 组件库**: Ant Design
- **状态管理**: Redux Toolkit
- **样式**: SCSS
- **国际化**: react-i18next
- **HTTP 请求**: Axios
- **包管理器**: pnpm

## 功能特性

- ✅ **路由管理**: 动态路由、路由守卫
- ✅ **状态管理**: 用户信息、主题、菜单、路由状态持久化
- ✅ **国际化**: 支持中英文切换
- ✅ **主题切换**: 支持浅色/深色主题
- ✅ **权限管理**: 用户、角色、权限、数据权限管理
- ✅ **请求封装**: 统一的请求拦截器、响应处理
- ✅ **布局组件**: 头部（breadcrumb、全屏、语言切换、用户信息）、侧边栏、底部

## 项目结构

```
src/
├── api/                 # API 接口模块
│   └── modules/         # 业务接口（auth, user）
├── assets/              # 静态资源
├── components/          # 公共组件
│   └── modal/           # 模态框组件
├── hooks/               # 自定义 Hooks
├── layouts/             # 布局组件
│   ├── header/          # 头部组件
│   └── sider/           # 侧边栏组件
├── locales/             # 国际化文件
│   └── lang/             # 语言包（en_US, zh_CN）
├── pages/                # 页面组件
│   ├── dict/             # 字典管理
│   ├── home/             # 首页
│   ├── menu/             # 菜单管理
│   ├── permission/       # 权限管理（用户、角色、菜单、数据权限）
│   └── system/           # 系统（登录、注册、异常页面）
├── route/                # 路由配置
├── store/                # 状态管理
│   └── slices/           # Redux slices
├── styles/               # 全局样式
├── types/                # TypeScript 类型定义
└── utils/                # 工具函数
```

## 安装教程

1. 确保已安装 Node.js (>= 16.0.0)
2. 安装 pnpm（如果没有）:
   ```bash
   npm install -g pnpm
   ```
3. 安装依赖:
   ```bash
   pnpm install
   ```
4. 启动开发服务器:
   ```bash
   pnpm dev
   ```
5. 构建生产版本:
   ```bash
   pnpm build
   ```

## 使用说明

### 开发环境启动

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产版本

```bash
pnpm preview
```

### 代码检查

```bash
pnpm lint
```

## 主要页面

- **登录页**: 用户登录
- **注册页**: 用户注册
- **首页**: 仪表盘
- **系统管理**: 用户管理、角色管理、菜单管理、数据权限
- **字典管理**: 字典数据维护

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## 许可证

MIT License