Ant Design組件 · Sword開發手冊

## 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的每個組件都像剛剛這樣一個一個引入并且測試效果，這樣必定會給未來打下扎實的基礎，***磨刀不誤砍柴工***，請大家謹記！～