https://012x.ant.design/
一直忙於工作，也沒時間總結。現在有點零散時間把之前做的筆記整理一下。
目前項目使用的技術棧是,前端UI框架Ant Design Pro，數據交互使用react,后端使用的是springcloud,離線存儲數據使用hadop(剛搭完還沒開始用).后端的技術棧世面上基本穩定都用微服務這套，因為spring全家桶一直非常穩定。
Ant Design Pro目前螞蟻金服和阿里巴巴內部上百個項目正在嘗試 Pro 的研發模式
1.安裝node和git
2.從 GitHub 倉庫中直接安裝最新的腳手架代碼。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project 目錄結構
我們已經為你生成了一個完整的開發框架，提供了涵蓋中后台開發的各類功能和坑位，下面是整個項目的目錄結構。
├── config # umi 配置，包含路由，構建等配置
├── mock # 本地模擬數據
├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地靜態資源 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 業務頁面入口和常用模板 │ ├── services # 后台接口服務 │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.js # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json 本地開發
安裝依賴。
$ npm install
如果網絡狀況不佳，可以使用 cnpm 進行加速。
$ npm start
啟動完成后會自動打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就代表成功了。
Ant Design Pro 的布局
在 Ant Design Pro 中，我們抽離了使用過程中的通用布局，都放在 layouts 目錄中，分別為：
BasicLayout：基礎頁面布局，包含了頭部導航，側邊欄和通知欄：
UserLayout：抽離出用於登陸注冊頁面的通用布局
BlankLayout：空白的布局
如何使用 Ant Design Pro 布局#
通常布局是和路由系統緊密結合的，Ant Design Pro 的路由使用了 Umi 的路由方案，為了統一方便的管理路由和頁面的關系，我們將配置信息統一抽離到 config/router.config.js 下，通過如下配置定義每個頁面的布局：
module.exports = [{ path: '/', component: '../layouts/BasicLayout', // 指定以下頁面的布局 routes: [ // dashboard { path: '/', redirect: '/dashboard/analysis' }, { path: '/dashboard', name: 'dashboard', icon: 'dashboard', routes: [ { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' }, { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' }, { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' }, ], }, ], }] 映射路由和頁面布局（組件）的關系如代碼所示，完整映射轉換實現可以參看 router.config.js。
更多 Umi 的路由配置方式可以參考：Umi 配置式路由。
Pro 擴展配置#
我們在 router.config.js 擴展了一些關於 pro 全局菜單的配置。
···
{
name: 'dashboard',
icon: 'dashboard',
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: ['admin'],
}
···
-
name: 當前路由在菜單和面包屑中的名稱，注意這里是國際化配置的 key，具體展示菜單名可以在 /src/locales/zh-CN.js 進行配置。 -
icon: 當前路由在菜單下的圖標名。 -
hideInMenu: 當前路由在菜單中不展現，默認false。 -
hideChildrenInMenu: 當前路由的子級在菜單中不展現，默認false。 -
hideInBreadcrumb: 當前路由在面包屑中不展現，默認false。 -
authority: 允許展示的權限，不設則都可見，詳見：權限管理。
Ant Design 布局組件#
除了 Pro 里的內建布局以為，在一些頁面中需要進行布局，可以使用 Ant Design 目前提供的兩套布局組件工具：Layout 和 Grid。
Grid 組件#
柵格布局是網頁中最常用的布局，其特點就是按照一定比例划分頁面，能夠隨着屏幕的變化依舊保持比例，從而具有彈性布局的特點。
而 Ant Design 的柵格組件提供的功能更為強大，能夠設置間距、具有支持響應式的比例設置，以及支持 flex 模式，基本上涵蓋了大部分的布局場景，詳情參看：Grid。
Layout 組件#
如果你需要輔助頁面框架級別的布局設計，那么 Layout 則是你最佳的選擇，它抽象了大部分框架布局結構，使得只需要填空就可以開發規范專業的頁面整體布局，詳情參看：Layout。
根據不同場景區分抽離布局組件#
在大部分場景下，我們需要基於上面兩個組件封裝一些適用於當下具體業務的組件，包含了通用的導航、側邊欄、頂部通知、頁面標題等元素。例如 Ant Design Pro 的 BasicLayout。
通常，我們會把抽象出來的布局組件，放到跟 pages、 components 平行的 layouts 文件夾中方便管理。需要注意的是，這些布局組件和我們平時使用的其它組件並沒有什么不同，只不過功能性上是為了處理布局問題。
除了 Ant Design 官方提供的布局組件，也可以試試 社區精選 里推薦的布局組件。
具體可以參考官方文檔:
作者：zhuyuansj
鏈接：https://www.jianshu.com/p/e8a5ce6eba1e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。