開發前的輸入
Ant Design Pro 作為一個前端腳手架，預設讀者已經懂了一些前端的基礎知識，并且了解 umi 和 Ant Design, 如果你是純粹的新手，第一次來跑項目建議讀一下 新手需知。磨刀不誤砍柴工，了解一些基礎知識可以讓學習曲線更加平滑。(以上文字引自Ant Design Pro 官網)
使用背景
近期由于想對現有背景前端進行改造更新,準備将擱置了很久很久的Antd(全稱:Ant Design Pro,後面用縮寫代替)撿起來,順便看看更新到現在的情況,正好發現了Cloud Studio這個平台,也算是一個契機吧.
使用速覽
我們登入了Cloud Studio後會進入如下界面,我們沒有發現自己所需的目标模闆,直接選擇:All in One
Cloud Studio首頁
根據Antd官網最新版的文檔,走初始化流程
初始化,使用 npm
# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp 複制
選擇 umi 的版本
? 🐂 使用 umi@4 還是 umi@3 ? (Use arrow keys)
❯ umi@4
umi@3 複制
如果選擇了 umi@4 版本，暫時還不支援全量區塊。
如果選擇了 umi@3，還可以選擇 pro 的模闆，pro 是基礎模闆，隻提供了架構運作的基本内容，complete 包含所有區塊，不太适合當基礎模闆來進行二次開發
? 🚀 要全量的還是一個簡單的腳手架? (Use arrow keys)
❯ simple
complete 複制
安裝依賴：
$ cd myapp && tyarn
// 或
$ cd myapp && npm install 複制
實戰
我這第一步就卡殼了...
先更新一下npm版本吧.
更新npm版本
我選擇簡單的腳手架好像還是翻車了???
簡單的腳手架
安裝依賴真的翻車了!
安裝依賴
嘗試啟動項目
嘗試啟動項目
不服輸的我又嘗試建立幾次不同的項目
再次嘗試
嘗試失敗了,決定從官網上找曆史版本再試一下,[手動狗頭]可能新版本不相容呢(前端菜雞)
開始按照V4版本安裝
安裝v4版本
以下是操作流程圖...
當然是選擇npm
繼續npm
現在是看到報錯就慌...老天保佑!!!
看到錯誤就慌
安裝依賴
啟動
我**,跑起來了?不對啊,怎麼跟官網的不太一樣,是官網停止更新了,還是我這哪裡又出問題了...
預覽效果
附antd官方預覽圖
antd官方預覽圖
結語
初次嘗試Cloud Studio,不确定是不是打開方式不對還是怎麼着,總的來說沒有達到自己的預期吧,但是能把項目跑起來,也是值得開心的.由于本人是前端菜鳥,可能打開方式不對,如果有官方大大能指正,感謝留言,希望Cloud Studio越來越好!