%20(2).svg)
项目简介
本项目是基于React脚手架的简易Web应用，集成了React、React Router DOM、Axios、Sass等技术栈。凭借清晰的文件夹结构与组件化设计，为开发者的扩展和维护工作提供便利。同时配置了别名和代理，方便开发与测试。
项目的主要特性和功能
- 运用React脚手架快速搭建项目，提高开发效率。
- 集成多种技术栈，包含用于路由管理的React Router DOM、处理HTTP请求的Axios、编写样式的Sass以及UI组件库Ant Design。
- 配置webpack的alias，简化项目引用路径。
- 设置代理，便于进行后端服务的请求。
- 项目文件夹结构清晰，易于扩展和维护。
安装使用步骤
假设用户已经下载了本项目的源码文件。
1. 安装React脚手架
确保已安装Node.js和npm。若未安装React脚手架，执行以下命令：
bash
cnpm install create-react-app -g
2. 创建项目并安装依赖
使用以下命令创建新项目并安装依赖：
bash
create-react-app myappname # 创建新项目，myappname替换为你想要的项目名称
cd myappname
3. 初始化Git仓库
将项目上传到本地Git仓库：
bash
git init
git add .
git commit -m "first"
4. 安装依赖包
安装项目所需的依赖包：
bash
cnpm install react-router-dom axios node-sass antd -S
5. 配置端口号
若需修改端口号，可在./scripts/start文件中进行配置。
6. 配置别名
在webpack.config.js文件中修改resolve > alias，添加如下配置：
javascript
'@': path.resolve(__dirname, '../src')
7. 制作favicon
在免费的在线制作网站下载32x32尺寸的favicon图标，并放置在public目录下。
8. 封装Axios并配置代理
安装http-proxy-middleware并创建setupProxy.js文件，配置代理：
bash
cnpm install http-proxy-middleware --save
在src目录下创建setupProxy.js文件，配置代理规则。
9. 启动项目
完成上述步骤后，使用以下命令启动项目：
bash
npm start
项目启动后，可在浏览器中访问http://localhost:3000查看效果。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】