# vite-react-app-2023summer **Repository Path**: topper/vite-react-app-2023summer ## Basic Information - **Project Name**: vite-react-app-2023summer - **Description**: 基于Vite4的React项目全家桶 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2025-05-21 - **Last Updated**: 2025-05-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vite-react-app-2023summer：基于Vite4的React项目全家桶 ## 项目集成说明： 1. 支持Sass/Scss/Less/Stylus 2. 已安装react-router-dom 3. 已安装ReduxToolkit、react-redux 4. 已安装axios 5. 已安装mockjs 6. 已安装antd 5.0+ ## 2023盛夏版：轻松搞定基于Vite4的React项目全家桶 该架构有超详细的教程，从零开始，逐步讲述基于Vite4的React全家桶的一条龙服务，新手也能快速掌握。 ### 教程目录： ``` 1 初始化项目 • 1.1 使用Vite新建项目 • 1.2 安装并运行项目 • 1.3 精简项目 2 Vite基础配置 • 2.1 配置国内镜像源 • 2.2 支持Sass/Scss/Less/Stylus • 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为中文语言 5 页面开发 • 5.1 构建Login页面 • 5.2 构建Home页面 • 5.3 构建Account页面 • 5.4 通过一级路由实现页面跳转 • 5.5 在React组件中实现页面路由跳转 • 5.6 在非React组件中实现页面路由跳转 6 组件开发 • 6.1 创建自定义SVG图标Icon组 • 6.2 创建Header组件 • 6.3 引入Header组件 • 6.4 在Header组件中添加页面导航示 • 6.5 组件传参 7 二级路由配置 • 7.1 创建二级路由的框架页面 • 7.2 配置二级路由 8 React Developer Tools浏览器插件 9 Redux及Redux Toolkit • 9.1 安装Redux及Redux Toolkit • 9.2 创建全局配置文件 • 9.3 创建用于主题换肤的store分库 • 9.4 创建store总库 • 9.5 引入store到项目 • 9.6 store的使用：实现亮色/暗色主题切换 • 9.7 非Ant Design组件的主题换肤 • 9.8 store的使用：实现主题色切换 • 9.9 安装Redux调试浏览器插件 10 基于axios封装公用API库 • 10.1 安装axios • 10.2 封装公用API库 • 10.3 Mock.js安装与使用 • 10.4 发起API请求：实现登录功能 11 一些细节问题 • 11.1 解决Modal.method跟随主题换肤的问题 • 11.2 路由守卫 • 11.3 设置开发环境的反向代理请求 • 11.4 兼容js文件 • 11.5 允许dev环境的IP访问 • 11.6 批量升级全部项目npm依赖包 12 build项目 • 12.1 设置静态资源引用路径 • 12.2 设置build目录名称及静态资源存放目录 • 12.3 开启build项目生成map文件（不推荐） • 12.4 执行build项目 13 项目Git源码 结束语 ``` ### 教程原文 教程原文请关注我的微信公众号【卧梅又闻花】， 查阅本项目完整教程：[《2023盛夏版：轻松搞定基于Vite4的React项目全家桶》](https://mp.weixin.qq.com/s/FJ_2p7WEvWHGF1zNJZxn0Q)