我用了多年的前端框架，強烈推薦！
大家好，我是魚皮，今天給大家分享一個我自己用了多年、現(xiàn)在團(tuán)隊也在用的前端框架 —— Ant Design Pro。
什么是 Ant Design Pro？
Ant Design Pro 是由螞蟻金服開發(fā)的、基于 Ant Design 組件庫的開發(fā)框架，專門用于構(gòu)建企業(yè)級管理后臺和前端應(yīng)用。
它提供了一整套前端中后臺項目的解決方案，包括路由、權(quán)限管理、國際化、數(shù)據(jù) mock、工程化等，幫助開發(fā)者快速搭建功能豐富的管理系統(tǒng)。
除了 Ant Design Pro 外，我們最好再了解一下 Ant Design 相關(guān)的技術(shù)生態(tài)，比如：
1）Ant Design：一套企業(yè)級 UI 設(shè)計語言和組件庫。它提供了豐富的界面組件、圖標(biāo)、布局和樣式，用于構(gòu)建現(xiàn)代化的 Web 應(yīng)用程序。Ant Design 遵循一套統(tǒng)一的設(shè)計規(guī)范，提供一致性的用戶體驗。
地址：https://ant.design/
2）Ant Design ProComponents：在 Ant Design 的基礎(chǔ)上進(jìn)行封裝和高度定制化的組件庫，包含了像高級表格、表單等常用的業(yè)務(wù)組件，更適用于開發(fā)中后臺項目，進(jìn)一步提高開發(fā)效率。
地址：https://procomponents.ant.design/
3）AntV：一整套數(shù)據(jù)可視化組件和工具庫。它提供了多種可視化圖表和圖形，用于幫助開發(fā)者在 Web 應(yīng)用中創(chuàng)建交互式、吸引人的數(shù)據(jù)可視化圖表。AntV 包括 G2、G6、F2 等多個子庫，每個子庫用于不同類型的數(shù)據(jù)可視化需求。
地址：https://antv.antgroup.com/
這么一大套技術(shù)，可以稱得上 “全家桶” 了！
為什么用 Ant Design Pro？
從定位上來說，Ant Design Pro 是一個開箱即用的中后臺前端開發(fā)框架，能夠幫助我們快速開發(fā)大多數(shù)網(wǎng)站（尤其是管理系統(tǒng)）。
比如使用一行命令，就能得到下圖的完整網(wǎng)站：
從功能上來說，Ant Design Pro 提供了一整套前端解決方案，包括路由、權(quán)限管理、數(shù)據(jù)管理、國際化、數(shù)據(jù) mock、工程化、打包部署等，基本覆蓋了整個前端開發(fā)流程，不用自己再去整合一堆庫、自己創(chuàng)建各種配置了，大幅提高開發(fā)效率。
從生態(tài)上來說，Ant Design Pro 是由大廠團(tuán)隊開發(fā)維護(hù)、質(zhì)量有保障；并且在 GitHub 上有幾萬個 star、社區(qū)也比較活躍，很多開發(fā)時出現(xiàn)的問題都有解決方案。
而作為一名全棧開發(fā)者，魚皮個人喜歡使用 Ant Design 和 Ant Design Pro 全家桶的重要原因是：Ant Design 同時有 Vue 和 React 的實現(xiàn)版本，無論我選擇什么前端框架開發(fā)項目，都能保持編碼和網(wǎng)站效果的一致性，進(jìn)一步提高開發(fā)效率。
換言之，學(xué)這一套組件庫就足夠了！
如何學(xué)習(xí) Ant Design Pro？
由于該框架由大廠團(tuán)隊開發(fā)，經(jīng)常發(fā)布更新版本和改動，所以請務(wù)必 閱讀官方文檔 來學(xué)習(xí)，千萬不要完全機械性地跟著教程去學(xué)習(xí)！
官方文檔：https://pro.ant.design/zh-CN/docs/getting-started/
Ant Design Pro 的官方文檔寫得還是非常清晰易懂的，從入門、開發(fā)再到部署都有完整的講解，按照順序讀一遍就行了。
這里再給大家?guī)讉€學(xué)習(xí)建議：
-
根據(jù)項目選擇合適的文檔版本，再去閱讀，v4 版本和 v5 版本差異非常大，我個人更喜歡用 v4 版本 -
新手在不熟悉 Ant Design Pro 功能之前，建議不要創(chuàng)建全量區(qū)塊項目，選擇 simple即可 -
邊讀文檔邊實踐，多嘗試修改代碼并查看效果，更容易理解 Ant Design Pro 框架的功能
如果你學(xué)習(xí)使用 Ant Design Pro 框架的項目教程時，遇到了報錯，不用慌張。先去看最新官方文檔上的命令和用法，或者切換文檔版本為和視頻一致。如果還有報錯，那么就把錯誤信息貼到百度去查詢。如果還有報錯，去框架的 Github Issues 區(qū)去搜一下（比如：https://github.com/ant-design/ant-design-pro/issues），99% 你遇到的問題別人也遇到過，而且大多數(shù)情況下都有對應(yīng)的解決方案。
希望大家靈活一點，任何教程都有保質(zhì)期，學(xué)會閱讀官方文檔、通過各種渠道自主解決問題，才能讓你之后的編程學(xué)習(xí)風(fēng)雨無阻！
實踐
編程導(dǎo)航 的用戶中心項目、API 開放平臺項目、智能 BI 項目都使用了 Ant Design Pro 作為前端開發(fā)框架，并且使用了 Ant Design 作為組件庫。
???? 點擊下方閱讀原文，獲取編程導(dǎo)航原創(chuàng)項目教程系列
往期推薦