本文共 2087 字，大约阅读时间需要 6 分钟。
一、了解前端技术栈
React：前端开发语言（着重学习）React 是一款用于构建用户界面的 JavaScript 框架，擅长构建高效、快速的用户界面。其核心理念是"一切皆为组件"，通过组件化的方式简化开发复杂度。
虚拟 DOM虚拟 DOM 是 React 的核心技术之一，它通过维护一个虚拟的 DOM 树来减少实际 DOM 操作的开销，从而提升应用的性能表现。
webpack：前端打包工具webpack 是一个开源的前端打包工具，能够将 JavaScript、CSS、图片等资源以更优的方式进行解析和加载。它支持灵活的配置，适用于多种项目需求，能够显著提升开发效率。
ant-design：商户侧前端使用的 UI 组件库（着重使用）ant-design 是基于 Ant Design 设计体系的 React UI 组件库，主要面向企业级中后台产品的开发。它提供了丰富的可复用组件，简化了前端开发流程。
dva：React 异步请求以及 Redux 全局数据流dva 是一个基于 Redux 和 Redux-Saga 的数据流解决方案。它以其简单易学的特性著称，仅需 6 个 API 就能实现复杂的数据流管理，对 Redux 用户尤其友好。
ES6：JavaScript语言的下一代标准ES6 是 JavaScript 的下一代标准，引入了诸多语法糖，如 arrow 函数、增强的对象操作、异步特性等，极大地提升了代码简洁性和效率。
axios：基于 Promise 的 HTTP 库axios 是一个兼容浏览器和 Node.js 的 HTTP 客户端库，支持 Promise API、请求 拦截、数据转换等功能，适用于各种 HTTP 请求场景。
二、项目结构理解
node_modules：前端依赖管理包node_modules 是安装 Node.js 后用于存储前端依赖的文件夹，包含了诸如 React、Webpack、轮播图插件等各种开发工具的包。
package.json：项目依赖版本管理文件package.json 是项目依赖管理的核心文件，记录了项目依赖的具体版本信息。它不仅管理前端组件库，还可用于开发自己的组件库。
.babelrc：ES6 语法解析.babelrc 是 Babel 的配置文件，用于处理 ES6+代码的语法解析和转换。它通常放在项目根目录下，与 webpack 配置一起使用。
Webpack 配置文件在开发环境和生产环境之间需要不同的配置。推荐采用以下文件结构：
三、src 源码目录讲解
3.1 componentscomponents 是存放业务组件的目录，包括 JavaScript 文件和对应的 LESS 样式文件。每个组件应有清晰的命名规范，确保命名具有语义化。
3.2 modelsmodels 文件夹用于定义页面交互的命名空间。通过在组件中引入相应的命名空间，可以实现全局数据流的管理。
3.3 servicesservices 文件夹包含处理业务逻辑的服务类。每个服务通常与特定的 API 接口对应，负责数据的获取与处理。
3.4 utilsutils 工具库存放常用功能模块，如异步请求工具、数据处理工具等。开发者可根据项目需求自行扩展。
3.5 router.jsrouter.js 是项目的路由配置中心。通过定义路由规则，实现页面的跳转和展示。
三、页面开发流程
四、实战：使用脚手架开发商户侧项目
五、开发注意事项
转载地址：http://easuz.baihongyu.com/