本篇文章主要包含的內容有三個方面。
第一、Ant Design Pro簡介;
第二、Ant Design Pro能做什么;
第三、初步使用;
我相信通過這三個方面的講解能讓你大概知道Ant Design Pro是個什么玩意，同時也能通過小Demo提升學習信心。
一、Ant Design Pro簡介
Ant Design Pro是一個開箱即用的中台前端/設計解決方案。
Ant Design Pro官網地址:https://pro.ant.design/index-cn
GitHub源碼下載地址為:https://github.com/ant-design/ant-design-pro
二、Ant Design Pro能做什么?
語言描述如下:
- 優雅美觀：基於 Ant Design 體系精心設計
- 常見設計模式：提煉自中后台應用的典型頁面和場景
- 最新技術棧：使用 React/dva/antd 等前端前沿技術開發
- 響應式：針對不同屏幕大小設計
- 主題：可配置的主題滿足多樣化的品牌訴求
- 國際化：內建業界通用的國際化方案
- 最佳實踐：良好的工程實踐助您持續產出高質量代碼
- Mock 數據：實用的本地數據調試方案
- UI 測試：自動化測試保障前端產品質量
用官網上一張圖來表示，如下圖:
三、初步使用
$ git clone git@github.com:ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start # 打開瀏覽器訪問 http://localhost:8000
更詳細的使用和發布可以參考這個網址:https://pro.ant.design/docs/getting-started-cn
關於組件介紹可以參考這個網址:https://pro.ant.design/components/AvatarList-cn
個人覺得之所以要參考官網是因為官網通常示例很全面，文檔很詳細，與現在不少博客的文章質量相比，官網的質量還是很不錯的。這也是我建議初學者盡量不要去看一些博客，因為考慮到有些人寫的博客文章質量實在有些差。包括我自己也不能完全說我寫的質量很好，但是有一點我還是很有把握的，那就是貼的源代碼示例運行都沒有問題，而且很多心得都是我在開發中積累的經驗，讓我感觸很深。
cmd運行的結果如圖所示:
說明了會自動幫你構建用webpack打包。
最終的運行效果應該是這樣的，如圖所示:
小結:
Ant Design Pro這個阿里巴巴的開箱即用的框架，我並沒有在實際開發中用過，僅僅只是初步的Demo玩玩。不過后續可能考慮要用。
本文主要參考Ant Design Pro 官方網站部分內容