如何進行前端UI框架Ant Design Pro分析

這篇文章將為大家詳細講解有關如何進行前端UI框架Ant Design Pro分析，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

一直忙于工作，也沒時間總結。現在有點零散時間把之前做的筆記整理一下。
目前項目使用的技術棧是,前端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' },
      ],
    },
  ],
}]

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 文件夾中方便管理。需要注意的是，這些布局組件和我們平時使用的其它組件并沒有什么不同，只不過功能性上是為了處理布局問題。

關于如何進行前端UI框架Ant Design Pro分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。