umi ui has been released, click here experience.

In v4 we released the block function, and we added some new features in a period of use and feedback to help users better use and experience the block.

🚀 Faster

In the new umi block we will help the user to automatically select the appropriate source. In the previous version, the block will use the default npm source. For users with poor network status, the improvement is obvious. The package management tools and sources you will be prompted for during the block installation.

If you want to use your own package management tools and sources, you can customize them with --npm-client and --registry.

npx umi block add AccountSettings --npm-client=yarn --registry=https://registry.npm.taobao.org

🌟 Block comes with npm and taobao sources, depending on the network to decide which source to use. Also, if your project contains a yarn.lock file, the block will use yarn to install the block.

🌟 TypeScript to JavaScript

The default block in Pro V4 is TypeScript, and some users still want to use the JavaScript version of the block for development. In the new version we have added support for js. If you need a version of js, just add the --js parameter.

npx umi block add AccountSettings --js

💄 Better umi block list

The original intention of umi block list is that you can quickly find the block, but in actual use, because the parameter of defaultGitUrl is not supported, it is often found that the block cannot be found during use. We solved this problem in the new version.

The default block style:

Used in Pro:

To provide a better experience, now select an item from the list for installation. The Pro block also provides a link to the preview. You can jump to Pro's preview to preview this block.

Here is a complete process preview：

Finally welcome to use, submit questions, PR.

Reference document

umi block https://umijs.org/zh/guide/block.html

pro-blocks  https://github.com/ant-design/pro-blocks/pulls

Ant Design Pro https://pro.ant.design/index-cn