Ant Design Pro框架快速上手實踐

2021-09-25 16:34:17 字數 1444 閱讀 1331

1.前言

react 是 facebook 公司推出的一套前端開發框架,是目前全世界最流行的前端框架。它的核心理念是將網頁應用看成乙個元件構成的狀態機(state machine),狀態的變化導致了 ui 的變化。

ant design 就是基於 react 實現的一套元件庫。它是由螞蟻金服體驗技術部開發的,最早是在2023年發布的,到現在已經發布了三個大版本,目前一共封裝了50多個元件。它在國內得到廣泛使用,可能是使用量最大的 react 元件庫,在國際上也有一定的知名度。

ant design和ant design pro說的淺顯一點就是元件和模板的關係,也可以這樣理解ant design是基礎庫而ant design pro是它的增強版,直接配套業務元件打包給你,供你使用。或者說是建材與樣板房的關係,利用各種建材搭建不同風格的樣板地方以供參考,開發人員可以從樣板房尋找靈感,選取相應的建材組裝自己的房子。

2.開發環境

首先,請安裝 nodejs。安裝完成後,執行下面的命令確認是否安裝成功。

node -v

npm -v

在國內,你可以安裝 cnpm 獲得更快速、更安全的包管理體驗。使用如下命令安裝:

npm install -g cnpm --registry=

然後你可以通過如下的命令確認是否成功:

cnpm -v

4.目錄結構

我們已經為你生成了乙個完整的開發框架,提供了涵蓋中後台開發的各類功能和坑位,下面是整個專案的目錄結構。

5.本地開發

開發第乙個頁面

參照已有的選單,router.config.js檔案中配置自定義選單和子選單鏈結路由。

在對應路徑下新建hello.js檔案,輸入簡單內容,儲存。頁面會出現我們新加的選單

如何對選單名稱國際化?新增新建選單國際化資源。

儲存後:

7.編譯發布

執行npm run build命令,編譯後檔案會儲存在根目錄dist資料夾中,每個模組儲存在各自資料夾中,統一部署在web容器(公司使用jetty)中執行。

Ant Design Pro 運用點滴 4

z turn 開發過程中,有時可以使用本地mock,對於乙個喜歡使用php的我來說,就不免想跨域呼叫一下資料爽爽。但是,官方文件對此寫得不是很多。但是又不是沒寫,只要靜下心,總會找到點什麼。在and design的文件,專案實戰這一節裡,寫了這麼幾行。這個.webpackrc配置不得不讓人注意。沿著...

ant design pro 踩坑之路

新入手react 我司要用螞蟻金服那個框架 從頭開始熟悉。慢慢踩坑之路。實時更新 1.使用靜態檔案資源 2.關閉自帶eslint檢查 找到package.json 檔案 刪除裡面的 pre commit npm run lint staged 3.proxy proxy裡面的 的千萬不要和你的位址裡...

輕鬆玩轉Ant Design Pro一

ant design pro 於ant design,其是一段自帶樣式的react元件,用於企業後台的漂亮的,可控的元件。ant design有很多元件和樣式,不可能所有都記住,我們只要記住常用的,遇到不常用的,學會查文件就可以了 因為ant design很強大,阿里有些大神就直接將ant desi...