1.介紹

umi是一個可插拔的企業級react應用框架。umi以路由為基礎的，支援類next.js的約定式路由，以及各種進階的路由功能
umi配以完善的外掛體系，覆蓋從原始碼到構建產物的每個生命週期
umi是螞蟻金服的底層前端框架
umi 可以簡單地理解為 roadhog + 路由，思路類似 next.js/nuxt.js，輔以一套外掛機制，目的是通過框架的方式簡化 React 開發

2.特性

1.開箱即用：內建react、react-router等
2.類next.js且功能完備的路由約定，同時支援配置的路由方式
3.完善的外掛體系，覆蓋從原始碼到構建產物的每個生命週期
4.高效能，通過外掛支援PWA(漸進式WEB應用)、以路由為單位的code splitting等
5.支援靜態頁面匯出，適配各種環境
6.開發啟動快，支援一點開啟dll和hard-source-webpack-plugin等
7.一鍵相容到IE9,基於umi-plugin-polyfills
8.完善的TypeScript支援，包括d.ts定義和umi test
9,與dva的資料流的深入融合，支援duck directory、model的自動載入、code splitting等等

3.快速上手

1.下載node,並且版本是8.10或以上
2.推薦使用yarn管理npm依賴，並使用國內源

//國內源
npm i yarn tyarn -g
//阿里內網源
tnpm i yarn @alipay/yarn -g

3.全域性安裝umi,版本是2.0.0或以上

yarn global add umi

4.腳手架
建立頁面

mkdir myapp && cd myapp

umi g page index
umi g page users

umi g 是 umi generate 的別名，可用於快速生成 component、page、layout 等，並且可在外掛裡被擴充套件，比如 umi-plugin-dva 裡擴充套件了 dva:model，然後就可以通過 umi g dva:model foo 快速 dva 的 model。

建立後pages目錄如下

── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js

5.啟動本地伺服器

umi dev

6.約定式路由
啟動umi dev後，pages下多個.umi的目錄。這是 umi 的臨時目錄，可以在這裡做一些驗證，但請不要直接在這裡修改程式碼
我們在 index 和 users 直接加一些路由跳轉邏輯
先修改 pages/index.js，

+ import Link from 'umi/link';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <Link to="/users">go to /users</Link>
    </div>
  );
}
 

再修改 pages/users.js，

+ import router from 'umi/router';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <button onClick={() => { router.goBack(); }}>go back</button>
    </div>
  );
}

然後瀏覽器驗證，應該已經可以在 index 和 users 兩個頁面之間通過路由跳轉了。
7.部署釋出
執行umi build,構建產物預設生成到 ./dist 下
通過 serve 做本地驗證,正常情況下應該是和 umi dev 一致的
8.部署
本地驗證完，就可以部署了，這裡通過 now 來做演示

yarn global add now
now ./dist

然後開啟相應的地址就能訪問到線上的地址了。
來源 https://umijs.org/zh/guide/create-umi-app.html