從0到1-UMI快速上手（1）
開發環境搭建
開發環境
UMI在Windows, Mac和Linux的表現都是一致的。你只需要在電腦上安裝Node.js環境。
為了便於開發，你還需要一個文字編輯器來編寫程式碼，可能你的電腦上已經安裝了其他的文字編輯器，但這裡我還是推薦使用VisualStudio Code。因為後續我們會使用配套的VisualStudio Code外掛來提升開發效率，並且它還自帶了一個命令列執行指令碼。
第一步 安裝Node.js
安裝Node還是挺簡單的，只需要到 官網 下載使用與自己系統的版本就可以了。
所有的安裝都是“下一步”，就可以了。
如果你已經安裝過Node，那麼你可以跳過前一步。
接下來在終端/控制檯視窗中執行命令node -v,來驗證一下你正在執行 node 8.1x以上的版本
>node -v v8.10.1
如果終端成功打印出node的版本號，就可以進入下一步了。
第二步 安裝VisualStudio Code
還是 官網 下載,全部下一步。
使用umi
第一步 安裝Umi
我們需要使用Umi來建立頁面（umi g），並執行多種開發任務，比如測試（umi test）、打包（umi build）和開發（umi dev）等。
全域性安裝 Umi。
使用 npm 來安裝Umi,請開啟終端/控制檯視窗，並輸入下列命令：
npm install -g umi
推薦使用 yarn 來安裝Umi,因為yarn對於多次執行安裝的情況做了快取，這個在我們前期，經常新建專案的時候，能夠節省很多時間。
npm install -g yarn
命令列執行結束後，判斷yarn是否安裝成功
yarn -v 1.12.3
使用yarn安裝Umi
yarn global add umi
命令列執行結束後，判斷yarn是否安裝成功
umi -v 2.3.2
第二步 安裝 create-umi
yarn global add create-umi ... success Installed "[email protected]" with binaries: - create-umi :sparkles:Done in 36.07s
create-umi主要是用來使用命令列建立umi相關的庫或者專案。命令中列印success，應該就安裝成功了，如果你還需要進一步確認，可以通過執行create-umi -v來列印create-umi的版本號。
第三步 使用create-umi新建專案
注意：第一個選項先選擇project。這裡的system指的是專案名，你可以輸入任意的名字。
create-umi system ? Select the boilerplate type (Use arrow keys) ❯ project ant-design-pro plugin block ? What functionality do you want to enable? ◉ antd ❯◉ dva ◯ code splitting ◯ dll ◯ hard source
create-umi提供的定製化能力，你可以通過空格鍵來選中你需要的功能，然後通過敲擊回車鍵，來確認開始建立專案。這裡我們選中antd和dva就好。
? What functionality do you want to enable? antd, dva create package.json create mock/.gitkeep create src/assets/yay.jpg create src/layouts/index.css create src/layouts/index.js create src/pages/index.css create src/pages/index.js create src/global.css create .gitignore create .editorconfig create .env create .umirc.js create .eslintrc create .prettierrc create .prettierignore create src/models/.gitkeep create src/app.js :clipboard:Copied to clipboard, just use Ctrl+V :sparkles:File Generate Done
如果你的命令列列印的日誌如上，那就說明你新建專案完成了，如果有其他的錯誤，可以確認一下，當前目錄下是否存在system資料夾。注意create-umi會自動幫你新建system資料夾，所以你可以稍微注意一下。
切換到專案目錄，安裝依賴
cdsystem yarn ...這個過程需要一點時間 success Saved lockfile. :sparkles:Done in 170.43s.
看到命令列列印success，一般就是安裝成功了，但是有時候因為一些網路問題，會出現丟包的情況。所以我們繼續驗證。
啟動開發伺服器
yarn start yarn run v1.12.3 $ umi dev ✔ Webpack Compiled successfully in 5.28s Starting the development server... DONECompiled successfully in 5289ms14:44:47 App running at: - Local:http://localhost:8000/ (copied to clipboard) - Network: http://192.168.124.10:8000/
列印如上日誌，說明專案初始化成功了。你可以通過瀏覽器訪問 http://localhost :8000/來訪問頁面。
第四步 專案結構
. ├── mock ├── package.json ├── src │├── app.js │├── assets ││└── yay.jpg │├── global.css │├── layouts ││├── index.css ││└── index.js │├── models │└── pages │├── index.css │└── index.js ├── .env └── .umirc.js
這裡是我們當前專案的目錄結構，使用create-umi建立的專案，是一個典型的umi專案結構，我們可以在umi約定使用的目錄中，新增我們所需要的內容，達到快速實現功能需求的目的。
./mock/
約定 mock 目錄裡所有的 .js 檔案會被解析為 mock 檔案。
比如，新建 mock/users.js，內容如下：
export default {
'/api/users': ['a', 'b'],
}
然後在瀏覽器裡訪問 http://localhost :8000/api/users 就可以看到 ['a', 'b'] 了。
使用了mock.js後你在也不用苦苦的等後端開發完成介面了
./src/
我們約定了將專案的所有原始碼放在src目錄裡面，umi專案的大部分的工作都將在這裡進行。當我們執行 umi dev 或者umi build 時，我們的程式碼會被轉換成瀏覽器能夠執行的正確的JavaScript版本，所以我們可以在這裡使用TypeScript或者其他JavaScript新語法。
./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' },
] }
]
從元件角度可以簡單的理解為如下關係：
<layout> <page>1</page> <page>2</page> </layout>
./src/pages/
約定 pages 下所有的 (j|t)sx? 檔案即路由。在umi中可以使用約定式路由和配置式路由，在實際專案開發中，我個人偏向於使用，約定式路由。畢竟這是umi的主要特性之一。使用約定式路由，意味著不需要維護，可怕的路由配置檔案。最常用的有基礎路由和動態路由（用於詳情頁等，需要從url取引數的情況）
基礎路由
假設 pages 目錄結構如下
+ pages/ + users/ - index.js - list.js - index.js
那麼，umi 會自動生成路由配置如下：
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/list', component: './pages/users/list.js' },
]
動態路由
umi 里約定，帶 $ 字首的目錄或檔案為動態路由。
比如以下目錄結構：
+ pages/ + $post/ - index.js - comments.js + users/ $id.js - index.js
會生成路由配置如下：
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
{ path: '/:post/', component: './pages/$post/index.js' },
{ path: '/:post/comments', component: './pages/$post/comments.js' },
]
./src/pages/404.js
當訪問的路由地址不存在時，會自動顯示404 頁面。只有build之後生效。除錯的時候可以訪問 /404 。
./src/pages/document.ejs
有這個檔案時，會覆蓋預設的 HTML 模板。需至少包含以下程式碼，
<div id="root"></div>
常用於需要設定網站名稱，增加meta，增加頭部js
./src/pages/.umi/
這是 umi dev 時生產的臨時目錄，預設包含 umi.js 和 router.js，有些外掛也會在這裡生成一些其他臨時檔案。可以在這裡做一些驗證，但請不要直接在這裡修改程式碼，umi 重啟或者 pages 下的檔案修改都會重新生成這個資料夾下的檔案。
./src/pages/.umi-production/
同 src/pagers/.umi，但是是在 umi build 時生成的，會在 umi build 執行完自動刪除。
檔名字尾.test.js 和 .e2e.js
測試檔案，umi test 會查詢所有的 .(test|e2e).(j|t)s 檔案跑測試。
./src/global.(j|t)sx?
在入口檔案最前面被自動引入，可以考慮在此加入 polyfill。umi區別於其他前端框架，沒有顯示的程式主入口，如src/app.js或src/index.js，所以在引用某些模組的時候，如果模組功能要求在程式主入口新增程式碼時，你就可以寫到這個檔案。
./src/global.(css|less|sass|scss)
這個檔案不走 css modules，自動被引入，可以寫一些全域性樣式，或者做一些樣式覆蓋。
.umirc.js 和 ./config/config.js
umi 的配置檔案，二選一。當兩者同時存在時，優先使用.umirc.js。
.env
環境變數，比如
BROWSER=none
準備工作就是這些，接下來就是實際開發了