# vite-react-app-2025spring

**Repository Path**: comyan/vite-react-app-2025spring

## Basic Information

- **Project Name**: vite-react-app-2025spring
- **Description**: 基于Vite6的React19项目全家桶
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 11
- **Created**: 2025-02-13
- **Last Updated**: 2025-02-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-react-app-2025spring：基于Vite6的React19项目全家桶

## 项目集成说明：
1. 支持React 19
2. 支持Sass/Scss/Less/Stylus
3. 已安装react-router-dom
4. 已安装ReduxToolkit、react-redux
5. 已安装axios
6. 已安装mockjs
7. 已安装antd 5.x

## 2025新春版：轻松搞定Vite6+React19全家桶

该架构有超详细的教程，从零开始，逐步讲述基于Vite6的React19全家桶的一条龙服务，新手也能快速掌握。

### 教程目录：

```
1 初始化项目
• 1.1 配置npm国内镜像源
• 1.2 使用Vite新建项目
• 1.3 安装并运行项目
• 1.4 精简项目
2 Vite基础配置
• 2.1 支持Sass/Scss/Less/Stylus
• 2.2 设置Vite服务监听端口
• 2.3 设置dev环境的Server端口号
• 2.4 设置dev环境自动打开浏览器
• 2.5 设置路径别名
3 项目架构搭建
• 3.1 项目目录结构设计
• 3.2 关于样式命名规范
• 3.3 设置全局公用样式
4 引入Ant Design 5.x
• 4.1 安装Ant Design
• 4.2 设置Antd为中文语言
• 4.3 兼容React19
• 4.4 批量升级全部项目npm依赖包到最新版本
5 页面开发
• 5.1 构建Login页面
• 5.2 构建公共组件PageHeaderWrapper
• 5.3 构建Home页面
• 5.4 构建Users页面
6 页面路由
• 6.1 构建全局路由
• 6.2 构建框架页面Entry
• 6.3 引入路由
• 6.4 路由跳转：构建左侧导航Sider组件
7 React Developer Tools浏览器插件
8 Redux及Redux Toolkit
• 8.1 安装Redux及Redux Toolkit
• 8.2 创建全局配置文件
• 8.3 创建用于主题换肤的store分库
• 8.4 创建store总库
• 8.5 引入store到项目
• 8.6 store的读取：将主题色和亮暗模式应用于项目
• 8.7 store的变更：在Header组件中实现亮暗模式切换
• 8.8 自建组件使用Antd的主题色：完善Sider
• 8.9 store的使用：实现主题色切换
• 8.9.1 创建主题色选择对话框组件
• 8.9.2 创建自定义SVG图标Icon组件
• 8.9.3 在Header组件中实现主题色切换
• 8.10 安装Redux调试浏览器插件
9 基于axios封装公用API库
• 9.1 安装axios
• 9.2 封装公用API库
• 9.3 Mock.js安装与使用
• 9.4 发起API请求：实现登录功能
10 其他优化
• 10.1 路由守卫
• 10.2 设置开发环境的反向代理请求
• 10.3 使用ESLint9实时检查代码
• 10.4 针对Windows系统的页面滚动条样式优化
11 build项目
• 11.1 设置静态资源引用路径
• 11.2 设置build目录名称及静态资源存放目录（选读）
• 11.3 执行build项目
12 项目Git源码
结束语
```

### 教程原文

教程原文请关注我的微信公众号【卧梅又闻花】，

查阅本项目完整教程：[《2025新春版：轻松搞定Vite6+React19全家桶》](https://mp.weixin.qq.com/s/1n_AGmKpSwYsMkTpgW6Bsg)