React-Admin開發(fā)手冊目錄快速開始菜單配置頁面開發(fā)系統(tǒng)路由Ajax請求Mock模擬數據樣式&主題導航布局Model(Redux)國際化權限控制Nginx配置開發(fā)代理代碼生成工具其他項目結構11..2.├──config//構建配置3.├──nginx-conf//生產部署nginx配置參考4.├── public//不參與構建的靜態(tài)文件5.├──scripts//構建腳本6.├──src7.│├──commons//通用js8.│├──components//通用組件9.│├──i18n//國際化10.│├──layouts//頁面框架布局組件11.│├──library//基礎組件12.│├──mock//模擬數據13.│├──models//模塊封裝，基于redux，提供各組件共享數據、共享邏輯14.│├──pages//頁面組件15.│├──router//路由16.│├── App.js//根組件17.│├──index.css//全局樣式18.│├──index.js//項目入口19.│├──menus.js//菜單配置20.│├──setupProxy.js//后端聯調代理配置21.│└──theme.js//主題變量22.├── package.json23.├──README.md24.└──yarn.lock快速開始快速開始\h從\hgithub上clone代碼，通過下面介紹的命令，進行開發(fā)或者生產構建。環(huán)境yaryar\hnv1.13.0nod\hev10.13.0下載11.$gitclone/sxfad/react-admin.git安裝依賴11.$cdreact-admin2.$yarn注：首次使用yarn安裝依賴可能比較慢，可以切換到國內鏡像，或者翻墻。開發(fā)啟動11.$cdreact-admin2.$yarnstart3.4.#指定端口5.$PORT=8080yarnstart6.7.#HTTPS方式啟動8.$HTTPS=trueyarnstart9.10.#不清除終端log，如果要調試構建腳本時，比較實用11.$FORCE_COLOR=trueyarnstart|cat注：啟動會有點慢，耐心等待一會兒，啟動成功后會自動打開瀏覽器。windows環(huán)境下可以使用\hcross-env設置命令行變量?？焖匍_始生產構建11.$cdreact-admin2.$yarnbuild注：構建生成的文件在 /react-admin/build 目錄下；nginx配置參考。域名子目錄發(fā)布項目如果項目需要掛載到域名的一個子目錄下，比如 \h \h/react-admin\h ，可以修改 src/router/AppRouter.jsx 中的 ROUTE_BASE_NAME 常量。生產構建時添加PUBLIC_URL參數（開發(fā)時不需要）。（開發(fā)時不需要）。修改 src/router/AppRouter.jsx ：12.export constROUTE_BASE_NAME= '/react-admin';3開發(fā)啟動：11.$yarnstart訪問：11.http://localhost:4001/react-admin/生產構建：11.$PUBLIC_URL=/react-adminyarnbuild訪問：11./react-admin菜單配置菜單配置在在 /src/menus.js 文件中配置菜單數據，前端硬編碼或異步加載菜單數據。菜單特性為了簡化開發(fā)，讓開發(fā)著專注于業(yè)務邏輯，系統(tǒng)對菜單進行了一些封裝。菜單支持頭部、左側、頭部+左側三種布局方式，詳見導航布局；系統(tǒng)會基于路由path自動選中對應的菜單；無菜單對應的二級頁面也可以選中相應父級菜單，詳見系統(tǒng)路由；左側菜單會自動滾動到可視范圍內；左側菜單支持展開收起、拖拽改變寬度頁面標題、tab標簽頁標題、面包屑基于菜單狀態(tài)自動生成，但也提供了對應的修改方式，詳見頁面開發(fā)；通過菜單配置，支持內嵌iframe打開頁面、a標簽方式打開頁面；菜單字段說明開發(fā)人員可以根據自己的需要，配置所需字段。字段必須說明key是需要唯一parentKey否用于關聯父級path是菜單對應的路由地址text是如果local對應的文案有效，將覆蓋text，否則菜單默認使用text作為展示內容icon否菜單圖標配置url否菜單對應會打開url對應的iframe頁面，如果配置了url，path將無效target否配合url使用，菜單將為a標簽 <a href={url} target={target}>{text}</a> local否國際化配置，系統(tǒng)在i18n.menu中獲取對應的文案order否菜單排序，數值越大越靠前顯示type否如果菜單數據中攜帶功能權限配置，type==='1' 為菜單，type==='2'為功能code否功能碼，如果是type==='2'，會用到此字段頁面開發(fā)頁面開發(fā)頁面開發(fā)本文檔使用 書棧(BookStack.CN) 構建 - -其他如果前端項目，不是git根目錄，在提交的時候，會報錯 Not a git repository 修改修改package.json，lint-staged如下即可1."lint-staged"