区块简介

在 Ant Design Pro 1.0 以及 2.0 的版本，很多人可能都有类似 #2250 这样的疑惑：

实际使用 Pro 时，Pro 提供的范例过多，基本上都需要全部删掉，然后实现自己的业务，删除的过程很麻烦，尤其是认证那一块，相互依赖。对于我来讲，只需要 Pro + antd，其它的使用范例掌握了方法之后没有使用的需求。

Pro 提供了一个开箱即用的中台前端/设计解决方案，但是作为一个完整的项目，它缺少一定的灵活度。为了解决这个问题，我们基于 umi 2.3 推出的区块功能尝试将 Pro 的页面拆分为一个一个的区块，使得初始的脚手架只包含基础的 Layout，页面都通过添加区块的方式可以按需的灵活的添加到项目中。

你也可以查看区块的视频介绍，或者查看 umi 的官方文档了解更具体的说明。

如何创建只包含 Layout 的 Ant Design Pro 脚手架

当前，我们基于 Ant Design Pro 2.0 的官方仓库在 UmiJS 下 fork 了一份 Pro 的代码，你可以理解为 umi 下的 Ant Design Pro 的仓库是 Ant Design Pro 3.0，如下图，它只包含了 Layout 的内容：

image.png

你可以通过如下的命令来创建它：

  1. $ yarn create umi # 然后在接下来的选项中选择 ant-design-pro

或者直接从 https://github.com/umijs/ant-design-pro 下载代码。

未来 umi 下的 Ant Design Pro 为作为 Pro 官方 V4 版本的初始版本继续由 Pro 官方维护。

如何使用区块

首先你需要确保你的项目使用的是 umi@2.3.0 以上版本，然后在你的项目中执行如下命令即可：

  1. $ umi block add [block name]

其中的 [block name] 需要替换为具体的区块名称或地址，你可以通过 umi block list 获取列表，或者直接到 https://github.com/umijs/umi-blocks 查看。当然也可以是任何符合区块规范的 github 或者 gitlab 地址。

需要注意的是，如果你的 umi 没有安装在全局，那么你需使用 npx 来执行这个命令，比如 npx umi block list。

原有的 Ant Design Pro 的代码如何使用区块

对于基于原有的 Ant Deisng Pro 仓库（2.0 完整的代码）的项目，你可能在想要添加一些页面的时候也有想要使用区块的需求，那么是否可以使用呢？答案是可以的，umi 下的区块适用于所有的 umi 项目，它其实就是帮你把一份典型的页面代码添加到你的项目中，帮助你快速的开发一个新的页面——本质上和你复制其它页面的代码到项目中没有区别。

使用区块的方式参考 umi 的文档 即可，所有 umi 项目使用区块的方式都一样。

但是你需要注意的是，区块仅仅只是为了帮助你快速的初始化页面，但是你依然需要安装你的业务逻辑修改它。当一个区块添加到你的项目中后它实际上就和你项目中的其他代码无异了，只是你项目中的普通的业务代码而已。在 Ant Design Pro 的 umi 区块中，为了使得区块更加的独立，能够很好的被 umi 的项目使用，区块中直接使用了 ant-design-pro 这个组件包。在 Pro 2.0 中，如果你是直接使用的 Pro 的官方仓库的代码，那么组件是通过直接引用 src/components 下的组件源代码使用的。为了避免一些公共组件的逻辑不一致（你有可能自己修改了 src/components 或者是 ant-design-pro 这个包有更新）以及组件代码出现冗余，你可能需要修改通过区块生成的新的的页面使用 src/components 或者修改原有的项目直接使用 ant-design-pro