前端开发中最重要的组成部分之一是 UI 组件库。UI 组件库不仅能够提高开发效率，也能够统一团队的开发风格，提高应用的可维护性。@formily/antd-components 是一个基于 Ant Design 的组件库，并且能够与 Formily 配合使用，提供更加容易使用的表单功能。本教程将会介绍 @formily/antd-components 的使用方式。
安装
使用 npm 安装 @formily/antd-components。
$ npm install @formily/antd-components --save
此外，还需要安装 Formily。
$ npm install @formily/core --save
还需要安装 Ant Design 组件库。
$ npm install antd --save
使用
引入组件
在代码中引入相关组件。
import { Field } from '@formily/core';
import { createForm } from '@formily/core';
import { Form } from '@formily/antd';
import { Input } from '@formily/antd-components';使用组件
-- -------------------- ---- -------
----- ---- - -------------
----- ------------ - -------- -- -
--------------------- --------
--
----- ------- - -- -- -
------ -
----- ----------- ------------------------
------ --------------- ---------------- ---------
------ ------------------- ----- ---- --------- --
--------
------ --------------- ---------------- ---------
--------------- ------------------- ----- ---- --------- --
--------
------- -------------- ------------------
------
---------
-------
--
-这样就完成了一个表单组件的编写。
总结
通过本教程，我们学习了如何使用 @formily/antd-components 以及 Ant Design、Formily。使用组件库能够大幅提高开发效率和代码可维护性，让我们拥有更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/formily-antd-components