Ant Design Pro 4、5 學習記錄 1---使用Yarn安裝ADP V4 V5含所有Block

前序準備(來自官網說明)

你的本地環境需要安裝 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章