大家好，我是魚皮，今天給大家分享一個(gè)我自己用了多年、現(xiàn)在團(tuán)隊(duì)也在用的前端框架 —— Ant Design Pro。

什么是 Ant Design Pro？

Ant Design Pro 是由螞蟻金服開發(fā)的、基于 Ant Design 組件庫的開發(fā)框架，專門用于構(gòu)建企業(yè)級(jí)管理后臺(tái)和前端應(yīng)用。

它提供了一整套前端中后臺(tái)項(xiàng)目的解決方案，包括路由、權(quán)限管理、國際化、數(shù)據(jù) mock、工程化等，幫助開發(fā)者快速搭建功能豐富的管理系統(tǒng)。

除了 Ant Design Pro 外，我們最好再了解一下 Ant Design 相關(guān)的技術(shù)生態(tài)，比如：

1）Ant Design：一套企業(yè)級(jí) UI 設(shè)計(jì)語言和組件庫。它提供了豐富的界面組件、圖標(biāo)、布局和樣式，用于構(gòu)建現(xiàn)代化的 Web 應(yīng)用程序。Ant Design 遵循一套統(tǒng)一的設(shè)計(jì)規(guī)范，提供一致性的用戶體驗(yàn)。

地址：https://ant.design/

2）Ant Design ProComponents：在 Ant Design 的基礎(chǔ)上進(jìn)行封裝和高度定制化的組件庫，包含了像高級(jí)表格、表單等常用的業(yè)務(wù)組件，更適用于開發(fā)中后臺(tái)項(xiàng)目，進(jìn)一步提高開發(fā)效率。

地址：https://procomponents.ant.design/

3）AntV：一整套數(shù)據(jù)可視化組件和工具庫。它提供了多種可視化圖表和圖形，用于幫助開發(fā)者在 Web 應(yīng)用中創(chuàng)建交互式、吸引人的數(shù)據(jù)可視化圖表。AntV 包括 G2、G6、F2 等多個(gè)子庫，每個(gè)子庫用于不同類型的數(shù)據(jù)可視化需求。

地址：https://antv.antgroup.com/

這么一大套技術(shù)，可以稱得上 “全家桶” 了！

為什么用 Ant Design Pro？

從定位上來說，Ant Design Pro 是一個(gè)開箱即用的中后臺(tái)前端開發(fā)框架，能夠幫助我們快速開發(fā)大多數(shù)網(wǎng)站（尤其是管理系統(tǒng)）。

比如使用一行命令，就能得到下圖的完整網(wǎng)站：

從功能上來說，Ant Design Pro 提供了一整套前端解決方案，包括路由、權(quán)限管理、數(shù)據(jù)管理、國際化、數(shù)據(jù) mock、工程化、打包部署等，基本覆蓋了整個(gè)前端開發(fā)流程，不用自己再去整合一堆庫、自己創(chuàng)建各種配置了，大幅提高開發(fā)效率。

從生態(tài)上來說，Ant Design Pro 是由大廠團(tuán)隊(duì)開發(fā)維護(hù)、質(zhì)量有保障；并且在 GitHub 上有幾萬個(gè) star、社區(qū)也比較活躍，很多開發(fā)時(shí)出現(xiàn)的問題都有解決方案。

而作為一名全棧開發(fā)者，魚皮個(gè)人喜歡使用 ?Ant Design 和 ?Ant Design Pro 全家桶的重要原因是：Ant Design 同時(shí)有 Vue 和 React 的實(shí)現(xiàn)版本，無論我選擇什么前端框架開發(fā)項(xiàng)目，都能保持編碼和網(wǎng)站效果的一致性，進(jìn)一步提高開發(fā)效率。

換言之，學(xué)這一套組件庫就足夠了！

如何學(xué)習(xí) Ant Design Pro？

由于該框架由大廠團(tuán)隊(duì)開發(fā)，經(jīng)常發(fā)布更新版本和改動(dòng)，所以請(qǐng)務(wù)必 閱讀官方文檔 來學(xué)習(xí)，千萬不要完全機(jī)械性地跟著教程去學(xué)習(xí)！

官方文檔：https://pro.ant.design/zh-CN/docs/getting-started/

Ant Design Pro 的官方文檔寫得還是非常清晰易懂的，從入門、開發(fā)再到部署都有完整的講解，按照順序讀一遍就行了。

這里再給大家?guī)讉€(gè)學(xué)習(xí)建議：

1. 根據(jù)項(xiàng)目選擇合適的文檔版本，再去閱讀，v4 版本和 v5 版本差異非常大，我個(gè)人更喜歡用 v4 版本

2. 新手在不熟悉 Ant Design Pro 功能之前，建議不要?jiǎng)?chuàng)建全量區(qū)塊項(xiàng)目，選擇 simple 即可

3. 邊讀文檔邊實(shí)踐，多嘗試修改代碼并查看效果，更容易理解 Ant Design Pro 框架的功能

如果你學(xué)習(xí)使用 Ant Design Pro 框架的項(xiàng)目教程時(shí)，遇到了報(bào)錯(cuò)，不用慌張。先去看最新官方文檔上的命令和用法，或者切換文檔版本為和視頻一致。如果還有報(bào)錯(cuò)，那么就把錯(cuò)誤信息貼到百度去查詢。如果還有報(bào)錯(cuò)，去框架的 Github Issues 區(qū)去搜一下（比如：https://github.com/ant-design/ant-design-pro/issues），99% 你遇到的問題別人也遇到過，而且大多數(shù)情況下都有對(duì)應(yīng)的解決方案。

希望大家靈活一點(diǎn)，任何教程都有保質(zhì)期，學(xué)會(huì)閱讀官方文檔、通過各種渠道自主解決問題，才能讓你之后的編程學(xué)習(xí)風(fēng)雨無阻！

實(shí)踐

編程導(dǎo)航 的用戶中心項(xiàng)目、API 開放平臺(tái)項(xiàng)目、智能 BI 項(xiàng)目都使用了 Ant Design Pro 作為前端開發(fā)框架，并且使用了 Ant Design 作為組件庫。

???? 編程導(dǎo)航原創(chuàng)項(xiàng)目教程系列：https://yuyuanweb.feishu.cn/wiki/SePYwTc9tipQiCktw7Uc7kujnCd