前序準備(來自官網說明)
你的本地環境需要安裝 yarn、node 和 git。我們的技術棧基於 ES2015+、React、UmiJS、dva、g2 和 antd,提前瞭解和學習這些知識會非常有幫助。
我的本地環境:git、node、npm、yarn
安裝步驟
1、yarn添加umi
yarn global add umi
2、安裝
2.1 新建一個空的文件夾作爲項目目錄,在目錄下執行
yarn create umi
2.2 選擇 ant-design-pro:
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
2.3選擇JavaScript
TypeScript
❯ JavaScript
2.4選擇proV4
proV5
❯proV4
2.5選擇complete完整安裝,類似於Preview
simple
❯complete
Ant Design Pro 腳手架將會自動安裝。
針對V5,要獲取所有區塊,需輸入命令,adp官方github的issue
yarn run pro fetch-blocks --branch=v5
3、初始化
yarn
4、運行
yarn start
5、目錄結構(來自官網說明)
我們已經爲你生成了一個完整的開發框架,提供了涵蓋中後臺開發的各類功能和坑位,下面是整個項目的目錄結構。
├── config # umi 配置,包含路由,構建等配置
├── mock # 本地模擬數據
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地靜態資源
│ ├── components # 業務通用組件
│ ├── e2e # 集成測試用例
│ ├── layouts # 通用佈局
│ ├── models # 全局 dva model
│ ├── pages # 業務頁面入口和常用模板
│ ├── services # 後臺接口服務
│ ├── utils # 工具庫
│ ├── locales # 國際化資源
│ ├── global.less # 全局樣式
│ └── global.ts # 全局 JS
├── tests # 測試工具
├── README.md
└── package.json
6、結果截圖
[1]: https://pro.ant.design/
[2]: https://preview.pro.ant.design/dashboard/analysis
[3]: https://github.com/ant-design/ant-design-pro/
[4]: https://github.com/ant-design/pro-blocks
[5]:https://github.com/ant-design/ant-design-pro/issues/6753