介紹
umi，中文可發音為烏公尺，是乙個可插拔的企業級 react 應用框架。umi 以路由為基礎的，支援類 next.js 的約定式路由，以及各種高階的路由功能，並以此進行功能擴充套件，比如支援路由級的按需載入。然後配以完善的外掛程式體系，覆蓋從原始碼到構建產物的每個生命週期，支援各種功能擴充套件和業務需求，目前內外部加起來已有 50+ 的外掛程式。
特性開箱即用，內建 react、react-router 等
類 next.js 且功能完備的路由約定，同時支援配置的路由方式
完善的外掛程式體系，覆蓋從原始碼到構建產物的每個生命週期
高效能，通過外掛程式支援 pwa、以路由為單元的 code splitting 等
支援靜態頁面匯出，適配各種環境，比如中臺業務、無線業務、egg、支付寶錢包、雲鳳蝶等
開發啟動快，支援一鍵開啟 dll 等
一鍵相容到 ie9，基於 umi-plugin-polyfills
完善的 typescript 支援，包括 d.ts 定義和 umi test
與 dva 資料流的深入融合，支援 duck directory、model 的自動載入、code splitting 等等
架構下圖是 umi 的架構圖。
從原始碼到上線的生命週期管理
市面上的框架基本都是從原始碼到構建產物，很少會考慮到各種發布流程，而 umi 則多走了這一步。
下圖是 umi 從原始碼到上線的乙個流程。
umi 首先會載入使用者的配置和外掛程式，然後基於配置或者目錄，生成乙份路由配置，再基於此路由配置，把 js/css 原始碼和 html 完整地串聯起來。使用者配置的引數和外掛程式會影響流程裡的每個環節。
環境準備
首先得有 node，並確保 node 版本是 8.10 或以上。(mac 下推薦使用 nvm 來管理 node 版本)
$ node -v
8.1x
複製**
推薦使用 yarn 管理 npm 依賴，並使用國內源
# 國內源
$ npm i yarn tyarn -g
# 後面文件裡的 yarn 換成 tyarn
$ tyarn -v
複製**
然後全域性安裝 umi，並確保版本是 2.0.0 或以上。
$ yarn global add umi
$ umi -v
2.0.0
複製**faq：如果提示 umi: command not found，你需要將 yarn global bin 路徑配置到環境變數中，方法如下：
# mac 系統:
$ sudo vi ~/.bash_profile
# 在 .bash_profile 中新增下面一行：
export path="$path:`yarn global bin`"
# windows系統:
# 獲取 global bin 的路徑
$ yarn global bin
# 複製上面的 global bin 的路徑，新增到系統環境變數 path。
複製**
umijs框架載入cesium
建立umi專案，yarn create umi 選擇是否使用typescript n 選擇依賴 專案建立完成後，新增cesium 首先在.umirc.js檔案中新增以下常量 constcesiumsource node modules cesium source constcesiumworkers...
使用umijs實現登入鑑權功能
需求描述 進入某乙個頁面，如果鑑權失敗，則跳轉到登入頁面進行登入，登入成功，返回之前的頁面 實現方式 實現分析 首先寫乙個鑑權頁面，鑑權成功載入頁面，鑑權失敗跳轉登入頁面，將這個頁面包裹在專案的根元件外層 import react from react import proptypes from p...
umi許可權路由 umijs實現許可權路由
先吐槽一句，自己的 被公司的網路限制給封了，我也是無語了。最近在學習umijs，umijs就不多做介紹了，跟著官方api走了一遍demo，遇到最折磨我的問題 umirc.js配置錯誤 是許可權路由，加上也在梳理react中許可權路由和巢狀路由，索性就一起梳理一下。個人感覺react中的許可權路由確實...