這篇文章將為大家詳細(xì)講解有關(guān)如何進(jìn)行前端UI框架Ant Design Pro分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)佳木斯免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
一直忙于工作，也沒時間總結(jié)?，F(xiàn)在有點零散時間把之前做的筆記整理一下。
目前項目使用的技術(shù)棧是,前端UI框架Ant Design Pro，數(shù)據(jù)交互使用react,后端使用的是springcloud,離線存儲數(shù)據(jù)使用hadop(剛搭完還沒開始用).后端的技術(shù)棧世面上基本穩(wěn)定都用微服務(wù)這套，因為spring全家桶一直非常穩(wěn)定。
Ant Design Pro目前螞蟻金服和阿里巴巴內(nèi)部上百個項目正在嘗試 Pro 的研發(fā)模式
1.安裝node和git
2.從 GitHub 倉庫中直接安裝最新的腳手架代碼。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project
我們已經(jīng)為你生成了一個完整的開發(fā)框架，提供了涵蓋中后臺開發(fā)的各類功能和坑位，下面是整個項目的目錄結(jié)構(gòu)。
├── config # umi 配置，包含路由，構(gòu)建等配置 ├── mock # 本地模擬數(shù)據(jù) ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地靜態(tài)資源 │ ├── components # 業(yè)務(wù)通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 業(yè)務(wù)頁面入口和常用模板 │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.js # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json
安裝依賴。
$ npm install
如果網(wǎng)絡(luò)狀況不佳，可以使用 cnpm 進(jìn)行加速。
$ npm start
啟動完成后會自動打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就代表成功了。
Ant Design Pro 的布局
在 Ant Design Pro 中，我們抽離了使用過程中的通用布局，都放在 layouts 目錄中，分別為：
BasicLayout：基礎(chǔ)頁面布局，包含了頭部導(dǎo)航，側(cè)邊欄和通知欄。
UserLayout：抽離出用于登陸注冊頁面的通用布局
BlankLayout：空白的布局
通常布局是和路由系統(tǒng)緊密結(jié)合的，Ant Design Pro 的路由使用了 Umi 的路由方案，為了統(tǒng)一方便的管理路由和頁面的關(guān)系，我們將配置信息統(tǒng)一抽離到 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 擴展了一些關(guān)于 pro 全局菜單的配置。
···
{
name: ‘dashboard’,
icon: ‘dashboard’,
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: [‘a(chǎn)dmin’],
}
···
name: 當(dāng)前路由在菜單和面包屑中的名稱，注意這里是國際化配置的 key，具體展示菜單名可以在 /src/locales/zh-CN.js 進(jìn)行配置。
icon: 當(dāng)前路由在菜單下的圖標(biāo)名。
hideInMenu: 當(dāng)前路由在菜單中不展現(xiàn)，默認(rèn) false。
hideChildrenInMenu: 當(dāng)前路由的子級在菜單中不展現(xiàn)，默認(rèn) false。
hideInBreadcrumb: 當(dāng)前路由在面包屑中不展現(xiàn)，默認(rèn) false。
authority: 允許展示的權(quán)限，不設(shè)則都可見，詳見：權(quán)限管理。
除了 Pro 里的內(nèi)建布局以為，在一些頁面中需要進(jìn)行布局，可以使用 Ant Design 目前提供的兩套布局組件工具：Layout 和 Grid。
柵格布局是網(wǎng)頁中最常用的布局，其特點就是按照一定比例劃分頁面，能夠隨著屏幕的變化依舊保持比例，從而具有彈性布局的特點。
而 Ant Design 的柵格組件提供的功能更為強大，能夠設(shè)置間距、具有支持響應(yīng)式的比例設(shè)置，以及支持 flex 模式，基本上涵蓋了大部分的布局場景，詳情參看：Grid。
如果你需要輔助頁面框架級別的布局設(shè)計，那么 Layout 則是你最佳的選擇，它抽象了大部分框架布局結(jié)構(gòu)，使得只需要填空就可以開發(fā)規(guī)范專業(yè)的頁面整體布局，詳情參看：Layout。
在大部分場景下，我們需要基于上面兩個組件封裝一些適用于當(dāng)下具體業(yè)務(wù)的組件，包含了通用的導(dǎo)航、側(cè)邊欄、頂部通知、頁面標(biāo)題等元素。例如 Ant Design Pro 的 BasicLayout。
通常，我們會把抽象出來的布局組件，放到跟 pages、 components 平行的 layouts 文件夾中方便管理。需要注意的是，這些布局組件和我們平時使用的其它組件并沒有什么不同，只不過功能性上是為了處理布局問題。
關(guān)于如何進(jìn)行前端UI框架Ant Design Pro分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
