antd pro v5安裝並運行完整demo的方法

AntDesignPro官網 v5：https://beta-pro.ant.design/index-cn

AntDesign官網：https://ant.design/index-cn

 

AntDesignPro的v5版本直接創建的就是一個TS項目。

但是AntDesignPro的組件使用不像AntDesign那樣大面積貼出代碼，可供靈活參考，所以打算下載AntDesignPro的v5完整demo的代碼康康。

 

一、新建一個空目錄，在空目錄里執行以下命令，安裝並運行項目:

npm create umi / yarn create umi

npm install / yarn 

npm start

 

 

運行出來的效果只有三個菜單，不是需要的界面。

 

二、執行命令npm run fetch:blocks

根據官網提示，執行以下命令，可以將完整demo的代碼拉取下來：

npm run fetch:blocks

但是執行后就報錯了。

一番資料搜索之后，發現有關npm run fetch:blocks命令報錯及解決的相關說明很少。但終於還是看到一個可用信息（參考：https://blog.csdn.net/qq_30255701/article/details/105463772），之后進行下面流程操作，就成功拉取到完整demo代碼。

 

三、獲取pro v5完整demo代碼流程：

1、github上下載代碼，代碼地址：https://github.com/ant-design/ant-design-pro/

2、安裝node_modules

3、運行出來后，也只有兩個菜單，這個時候，執行命令npm run fetch:blocks即可拉取到完整demo的代碼。

 

友好提示：npm run fetch:blocks命令執行后，安裝到一半卡住，就沒繼續安了，於是終止了命令重新執行一次，安裝成功。但是重復執行這個命令造成某些組件的重復引入，會報錯，這里找到文件，在代碼中去掉重復引入就好了。

 

最終運行出完整demo效果跟官方一樣（https://preview.pro.ant.design/dashboard/analysis?primaryColor=%231890ff&fixSiderbar=true&colorWeak=false&pwa=false），如下：