前序準備

你的本地環(huán)境需要安裝 node 和 git。技術(shù)?；?ES2015+、React、dva、g2 和 antd，提前了解和學(xué)習這些知識會非常有幫助。

Ant Design Pro 腳手架內(nèi)用到的組件分為兩種:

antd 組件：https://ant.design/docs/react/introduce-cn

pro 自帶組件：https://github.com/ant-design/ant-design-pro/tree/master/src/components

安裝

運行命令：

git clone?https://gitlab.stnts.com/st-jinrong/st_react_admin.git

npm i

npm start 如果對git命令不太熟悉 可以用svn工具

布局

ant design目前提供了兩套布局 layout 和 grid

grid：柵格組件

特點：按照一定的比例劃分頁面

隨著屏幕的變化依舊保持比例

具有彈性布局的特點

layout組件：

頁面框架級別的布局設(shè)計 針對于框架布局結(jié)構(gòu)

路由的配置

路由信息的配置 在src/common/router.js 中

菜單的配置

菜單信息的配置 在src/common/menu.js 中

隱藏菜單欄

如果需要隱藏某條菜單欄 可以在該條數(shù)據(jù)中增加hideInMenu參數(shù)

隱藏面包屑

如果需要隱藏面包屑中的某個層級，可以使用hideInBreadcrumb

權(quán)限管理

控制菜單顯示

設(shè)置authority屬性 配置該項菜單的準入權(quán)限

控制路由導(dǎo)向

菜單欄中配置的權(quán)限會自動同步到對應(yīng)的路由中，如果router.js中有不同的配置，路由控制以router.js為準

躍躍欲試 新增頁面

腳手架中提供了兩種布局模板：

基礎(chǔ)布局： BasicLayout

賬戶相關(guān)布局： UserLayout

為了規(guī)范統(tǒng)一 新建的文件需要首字母大寫 文件夾也如此

樣式

項目中采用的是less

less用起來也很簡單

全局樣式的定義

渲染出來的class名稱帶了一個hash值 保證了它的唯一性

css module只對className和id進行轉(zhuǎn)換?

屬性選擇器和標簽選擇器都不進行處理

推薦使用className

新增 model和service

router.js 中 引入list的model

BasicList組建中 通過connect連接model

這個組建就可以通過this.props拿到model中l(wèi)ist.js中定義state的數(shù)據(jù)了

model 中的list.js

從mock直接切換到服務(wù)器端請求

在本地運行npm start的時候

接口請求會調(diào)用本地的mock數(shù)據(jù)

如果在開發(fā)過程中?

需要用到指定服務(wù)器端的接口

則需要如下配置

關(guān)閉mock npm start:no-proxy

重定向

引入外部模塊

根據(jù)業(yè)務(wù)需求 有時還需要映入其他外部的模塊 比如映入富文本組件react-quill

引入依賴

在終端輸入命令安裝

npmireact-quill --save

加上--save參數(shù)會自動添加到package.json中

使用

構(gòu)建和發(fā)布

構(gòu)建

項目開發(fā)完成 只需要運行一行命令 就可以打包項目了

npmrun build

代碼分割

disableDynamicImport: false設(shè)置成fals

打包的時候 會把一個大的js文件分割成多個js

對應(yīng)頁面加載對應(yīng)的js文件

環(huán)境變量

需要區(qū)分開發(fā) 部署 和測試環(huán)境的時候 可以通過 .webpackrc 中設(shè)置 env 環(huán)境變量來實現(xiàn)

配置主題

theme:'@primary-color':'#10e99b',,

生成API文檔

運行如下命令 在dist文件下面 就會生成api文件