开箱即用的中台前端解决方案

大家好，我是前端实验室的大师兄!

今天大师兄要分享的是一套开箱即用的前端解决方案：Ant Design Pro

简介

Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端/设计解决方案。

Ant Design Pro 力求提供开箱即用的开发体验，为此提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。它为中后台中常见的方案提供了最佳实践，从而减少学习和开发成本。

项目内容概览

统计仪表面板：分析页、监控和工作台

各种表单；包括基础表单、分步表单、高级表单；

各种列表：搜索列表、查询表格、卡片列表等

详情页布局和个人配置也是考虑很全面。

还内置了图形编辑的功能。

知识概览

Ant Design Pro 是一个综合性的解决方案，涉及的知识点很多。我们可以通过下面的大图来了解整个架构。

每一个部分都是很重要的知识点。一些知识点也在我们前期的文章中介绍过，欢迎大家查阅。 也可以查阅文末的项目链接进一步了解

使用

提供了 pro-cli 来快速的初始化脚手架。

# 使用 npm
npm i @ant-design/pro-cli -g
# 使用 yarn
pro create myapp

选择 umi 的版本

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

如果选择了 umi@4 版本，展示还不支持全量区块。 如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

开发和部署

开发主要是指私有定制的二次开发。先看下项目目录结构。

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

Ant Design Pro 以 umi 作为脚手架，启动和开发与 umi 基本相同。

部署项目和普通的项目没有太大差别。使用 node scripts 中的构建命令即可完成构建。

体验和建议

Ant Design Pro 自带多场景的最佳实践方案，启动即完成了项目的整体架构。同时，它内置了模板组件，让开发更加高效。如果内置模板不能满足直接需求，该项目也做好了充分的兼容。它可以无缝对接 Ant Design, 让开发者有更多的组件可以选择或重组。 关于 Ant Design Pro 的介绍就到这里了。想要了解更多内容，请查阅下方的官方地址

Ant Design Pro地址 https://pro.ant.design/zh-CN/

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复111，按提示操作即可进群。