umi 通過 create-umi 提供腳手架，包含一定的定製化能力。推薦使用 yarn create 命令，因為能確保每次使用最新的腳手架。

1. 建立專案

mkdir myapp && cd myapp
yarn create umi

然後，選擇你需要的功能，功能介紹詳見 plugin/umi-plugin-react
然後手動安裝依賴

yarn

最後通過 yarn start 啟動本地開發，

yarn start

一個複雜應用的目錄結構如下

├── dist/                          // 預設的 build 輸出目錄
├── mock/                          // mock 檔案所在目錄，基於 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二選一
└── src/                           // 原始碼目錄，可選
    ├── layouts/index.js           // 全域性佈局
    ├── pages/                     // 頁面目錄，裡面的檔案即路由
        ├── .umi/                  // dev 臨時目錄，需新增到 .gitignore
        ├── .umi-production/       // build 臨時目錄，會自動刪除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 頁面
        ├── page1.js               // 頁面 1，任意命名，匯出 react 元件
        ├── page1.test.js          // 用例檔案，umi test 會匹配所有 .test.js 和 .e2e.js 結尾的檔案
        └── page2.js               // 頁面 2，任意命名
    ├── global.css                 // 約定的全域性樣式檔案，自動引入，也可以用 global.less
    ├── global.js                  // 可以在這裡加入 polyfill
├── .umirc.js                      // umi 配置，同 config/config.js，二選一
├── .env                           // 環境變數
└── package.json
 

2. mock

約定 mock 目錄裡所有的 .js 檔案會被解析為 mock 檔案

3. src

約定 src 為原始碼目錄，但是可選，簡單專案可以不加 src 這層目錄

4. src/layouts/index.js

全域性佈局，實際上是在路由外面套了一層。
你的路由是：

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]

如果有 layouts/index.js，那麼路由則變為：

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]
 

5. src/pages

約定 pages 下所有的 (j|t)sx? 檔案即路由

6. src/pages/404.js

開發模式下有內建 umi 提供的 404 提示頁面，所以只有顯式訪問 /404 才能訪問到這個頁面

7. src/pages/document.ejs

有這個檔案時，會覆蓋預設的 HTML 模板。至少包含以下程式碼

<div id="root"></div>

8. src/pages/.umi

這是 umi dev 時生產的臨時目錄，預設包含 umi.js 和 router.js，有些外掛也會在這裡生成一些其他臨時檔案。可以在這裡做一些驗證，但請不要直接在這裡修改程式碼，umi 重啟或者 pages 下的檔案修改都會重新生成這個資料夾下的檔案。

9. src/pages/.umi-production

同 src/pagers/.umi，但是是在 umi build 時生成的，會在 umi build 執行完自動刪除。

10. .test.js 和 .e2e.js

測試檔案，umi test 會查詢所有的 .(test|e2e).(j|t)s 檔案跑測試。

11. src/global.(j|t)sx?

在入口檔案最前面被自動引入，可以考慮在此加入 polyfill。

12. src/global.(css|less|sass|scss)

這個檔案不走 css modules，自動被引入，可以寫一些全域性樣式，或者做一些樣式覆蓋。

13. .umirc.js 和 config/config.js

umi 的配置檔案，二選一。

14. .env

環境變數，比如：

CLEAR_CONSOLE=none
BROWSER=none

來源 https://umijs.org/zh/guide/router.html