深入解析React前端开发系列（七）：Ant设计框架应用指南

更新:11-14 民间故事我要投稿纠错投诉

大家好，关于深入解析React前端开发系列（七）：Ant设计框架应用指南很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

React系列系列：

前端React系列1 : React简介

前端React系列2 : create-react-app介绍

前端React系列3 : TypeScript简介

前端React系列4：Ant Design简介

前端React系列五：React+CRA+TS+Ant Design 高效开发前端

前端React系列六：ant-design-pro简介

前端React系列七：ant-design-pro架构

前端React系列八：ant-design-pro辅助开发命令

前端React系列9：Umi简介

前端React系列10：umi环境变量

前言

Ant Design Pro 是专为企业级中后端应用设计的完整前端解决方案。它基于Ant Design设计语言，采用React技术栈，集成UmiJS、Dva等工具。下面对Ant Design Pro架构进行详细分析：

总体架构

通过下面的大图我们可以了解整个Ant Design Pro的架构。

image.pngAnt Design Pro 的架构由以下关键组件组成：

UI层：基于Ant Design的高质量组件库。数据层：通过Dva管理应用程序状态和数据流。路由层：路由管理由UmiJS提供。构建和工具链：Webpack、Babel、ESLint 和其他工具集成。开发和测试：Jest 和Enzyme 用于测试，Prettier 和ESLint 用于代码质量。

核心技术栈

UmiJS

插件框架：UmiJS 是一个插件前端框架，提供强大的路由管理和工程支持。文件即路由：根据文件结构自动生成路由配置。动态加载：支持按需加载，提高性能。插件机制：通过插件系统扩展功能，适应不同的项目需求。

Dva

状态管理：基于Redux和Redux-saga，简化状态管理。 Model：将state、reducers、effects、subscriptions结合起来，通过model来组织状态和逻辑。数据流向：提供清晰的数据流向，方便调试和维护。

Design

组件库：提供丰富的UI组件，如表单、表格、按钮等，提高开发效率。设计语言：统一设计规范和风格，保证应用界面的一致性。定制：支持主题定制和风格覆盖，满足个性化需求。

项目结构

Ant Design Pro 的项目结构合理，易于组织和管理代码。一个典型的项目结构如下：

/public //公共资源文件，例如HTML模板和静态资源

/src

/assets //静态资源，如图片、样式文件等

/components //常用组件

/models //Dva数据模型，用于管理全局状态

/services //与后台界面交互逻辑

/utils //实用函数和公共方法

/layouts //布局组件

/pages //页面组件

/locales //国际化资源文件

/config //UmiJS 配置文件

/mock //模拟数据，用于本地开发和测试

核心功能

组件化开发

高质量的组件：Ant Design 提供的组件封装了常见的UI 交互模式，开发者可以直接使用这些组件来构建页面。模块化：通过组件开发提高代码的可重用性和可维护性。

路由管理

文件正在路由：UmiJS 根据文件结构自动生成路由配置。动态加载：支持代码分割和按需加载，优化性能。

状态管理

简化Redux的使用：Dva提供了简单的API，结合了Redux和Redux-saga的优点，降低了使用门槛。模型理念：通过模型将state、reducers、effects、subscription结合起来，方便管理。

国际化支持

内置国际化：Ant Design Pro 提供国际化支持，并通过/locales 文件夹管理多语言资源文件。

权限管理

基于角色的访问控制（RBAC）：支持基于角色的权限管理，开发者可以根据业务需求自定义权限规则。

模拟数据

本地开发和测试：支持通过/mock目录和配置文件生成模拟数据和模拟接口。

构建和工具链

Webpack

Webpack可以帮助我们完成一些任务。比如js压缩、css压缩、编译模板文件等，从而减少前端的工作量。当然，Webpack 的功能非常强大，可以帮助我们完成远不止这些的工作。

模块打包：将模块化JavaScript 文件及其依赖项打包到静态资源中。插件和加载器：通过插件和加载器扩展功能，例如用于处理ES6+ 代码的Babel-loader 和用于处理CSS 文件的CSS-loader。开发服务器：提供模块热替换（HMR），提高开发效率。

Babel

JavaScript 编译器：将现代JavaScript 语法转换为与旧版浏览器兼容的代码。

fabric

pro 具有内置结构作为编码标准。 Fabric 提供了严格但不严格的lint 规则集，包括eslint、stylelint 和prettier 三个工具，可以显着提高代码质量，规范代码风格。

代码质量：通过ESLint进行代码静态分析，识别潜在问题。代码风格：通过Prettier统一代码格式，保证代码风格一致。

umi 与 webpack

运行时和编译时

Pro的底座基于umi。与webpack 相比，umi 增加了运行时相关的能力，这些能力有时我们在开发时可能很难区分。

编译时间是指代码在编译时所做的事情。此阶段的环境一般是node环境，可以使用fs、path等功能。但同时由于没有使用webpack，所以无法使用jsx、导入图片等非node能力。运行时是指代码编译并开始运行的阶段。这个阶段一般是浏览器环境。无法使用fs、path等函数。访问URL时也会出现跨域问题。不过这个环境已经是webpack编译好的，所以可以写jsx，导入图片等功能。运行时和编译时两个环境很容易混淆。这是一个简单的版本：

src 文件夹包含运行时代码，该代码将由webpack 编译。所有其他目录都可以被视为已编译并且可以使用节点功能。这也是我们不能在config.ts中写JSX的原因。

umi-插件化的前端框架

umi 是Pro 的基础。它是一个基于webpack 的集成工具。与webpack 相比，umi 增加了运行时能力，帮助我们配置了很多webpack 预设。它还减少了webpack 升级带来的问题。这就是我们可以提供插件的原因。

@umijs/plugin-access，权限管理@umijs/plugin-analytics，统计管理@umijs/plugin-antd，antd UI 组件集成@umijs/plugin-initial-state，初始化数据管理@umijs/plugin-layout，配置启用ant-design-pro 的布局@umijs/plugin-locale，国际化能力@umijs/plugin-model，基于hooks 的简单数据流@umijs/plugin-request，基于umi-request 和umi-hooks 的请求方案如果如果你喜欢umi 的默认配置，可以在这里查看是否有你喜欢的配置。如果还不满意，需要自定义webpack。 chainWebpack可以自定义内置的webpack配置。

如果你还想了解更多这方面的信息，记得收藏关注本站。