Antd Pro v4入門

Antd Pro v4入門

什麼是Ant Design Pro

Ant Design Pro 是一個企業級中後臺前端/設計解決方案，我們秉承 Ant Design 的設計價值觀，致力於在設計規範和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提升企業級中後臺產品設計研發過程中的『用戶』和『設計者』的體驗。
用來構建一套基於 React 的中後臺管理控制檯的腳手架，它可以幫助你快速搭建企業級中後臺產品原型。
模板預覽：https://preview.pro.ant.design/
你的本地環境需要安裝 yarn、node 和 git。技術棧基於 ES2015+、React、UmiJS、dva、g2 和 antd。

如何構建

這裏藉助umi進行搭建（umi介紹）

$yarn create umi

選項配置

$ yarn create umi

? Select the boilerplate type (Use arrow keys)
❯  ant-design-pro  - Create project with a 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.

? Do you want to use typescript? (y/N)  y

生成項目目錄結構

├── 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

安裝依賴。

npm install

如果網絡狀況不佳，可以使用 tyarn 進行加速。

npm start