## Ant Design官网文档 文档地址：https://ant.design/docs/react/introduce-cn ## 最简单的组件引入 1. 我们找到component模块下对button，查看文档 ![](https://box.kancloud.cn/24470e776ec5ba8c34a84f4d0101160b_1834x1758.png) 2. 稍做修改引入我们的Demo页面 ![](https://box.kancloud.cn/c0e6d3f13cae426194849d89670e400e_992x722.png) 3. 打开系统查看效果 ![](https://box.kancloud.cn/22b978bbdfa84ef5711b23dd86811cf0_1344x666.png) ## 常见的Select组件引入 1. 我们找到常用的select，查看文档 ![](https://box.kancloud.cn/541fa1377d2150bf8131a5c2885329c4_1824x1766.png) 2. 稍做修改引入我们的Demo页面 ![](https://box.kancloud.cn/7c97a1cc2684bb82e8c04fd53a486d72_1516x1156.png) 3. 发现代码较乱，可以使用下`prettier`命令，使用之后代码格式化可读性更高 ![](https://box.kancloud.cn/7aea3c134db5dc0c7ae124e8311fd90e_794x938.png) ![](https://box.kancloud.cn/a08668ac0ea4e0b098dea7329d380719_2368x1726.png) 4. 打开系统查看效果 ![](https://box.kancloud.cn/f8af339fddd66887ef47f0c760b527fd_1370x576.png) 5. 选中后打开console，发现点击事件生效 ![](https://box.kancloud.cn/814df929b426251ad6e665e4696fc192_1374x1054.png) ## 后记 * Ant Design的组件质量非常高，数量也多，在这个章节只是简单的教大家如何引入组件 * 若已有基础可直接略过，如果是新手，则强烈推荐将Ant Design的每个组件都像刚刚这样一个一个引入并且测试效果，这样必定会给未来打下扎实的基础，***磨刀不误砍柴工***，请大家谨记！～