%20(2).svg)
项目简介
本项目是基于React 17、Ant Design 4、MobX 6、Webpack 5和JavaScript构建的前端开发脚手架，提供了一套完整的前端开发解决方案，涵盖开发、打包、代码验证、接口模拟等功能，能助力开发者更高效地开展前端项目开发。
项目的主要特性和功能
- 针对开发和生产环境提供不同的打包配置，满足多样化部署需求。
- 借助ESLint进行代码验证，Prettier保证代码风格统一，提升代码质量与可维护性。
- 支持动态生成Mock文件，方便在后端接口未完成时进行前端开发和测试。
- 实现热更新功能，减少开发时的页面刷新次数；支持异步组件加载，优化页面性能。
安装使用步骤
环境准备
假设用户已下载本项目的源码文件，且本地已安装Node.js和npm。
安装依赖
在项目根目录下，打开终端并执行以下命令安装项目依赖：
npm install
开发模式
执行以下命令启动开发服务器：
npm start
服务器启动后，可在浏览器中访问 http://localhost:9999 查看项目。
生产打包
执行以下命令进行生产环境打包：
npm run build
打包后的文件会输出到 dist/[package.name]/[package.version] 目录下。之后可将 public 和 react-starter 文件夹拷贝到后端服务的静态资源目录下，或者通过压缩包 react-starter_1.0.0_public.tgz 解压部署。
CDN部署打包
若需使用CDN部署，先配置 config/config.js 下对应的 cdnPrefix 的值，然后执行以下命令：
npm run build-cdn
ESLint验证
- 测试：执行以下命令进行ESLint测试：
npm run test - 修复：执行以下命令自动修复ESLint问题：
npm run fix
生成Mock文件数据
根据 api-cache 缓存的后端接口信息和对应的 xx-mock.json 文件添加Mock数据到 xx-mock.json，支持以下几种生成方式：
- 所有Mock文件：
npm run build-mock mockAll
- 单个Mock文件：
npm run build-mock login
- 单个Mock接口：
npm run build-mock login.logout
- 混合方式：
npm run build-mock login.logout user
项目配置
拉取代码后，需将所有 react-starter 替换为自己的项目名称。同时，复制 config/config_default.js 为 config/config.js（本地配置），该配置文件会优先使用。配置文件包含网页和前端相关配置，以及接口Mock的开关配置。执行 npm start 后会动态生成 conf.json 和 mock.json。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】