前言

umi，中文可發(fā)音為烏米，是一個可插拔的企業(yè)級 react 應(yīng)用框架蜕径。這個庫入門的門檻比較高两踏，umi是這個樣子的，umi = react + redux + react-router + ts + dva + umi腳手架 + ant Design Pro + ant Design UI + umi-block兜喻。如果你沒有豐富的react基礎(chǔ)你來學(xué)習(xí)他或者是看懂它梦染，那將是很困難的一件事，本博客則是盡量把用戶當(dāng)做小白進行入門朴皆，如果你依然覺得困難帕识，那么抱歉本人只能做到這樣了。輕噴...

這里是它的官網(wǎng)：https://umijs.org/zh/.

在開始之前遂铡，你一定要有react的基礎(chǔ)肮疗，不然你來了只是白來，因為即使項目跑起來了忧便，你也看不懂代碼族吻。我猜你需要這個：react入門-React + webpack 開發(fā)單頁面應(yīng)用

相關(guān)鏈接：
umi
ant-design-pro
ant-design-pro github
pro-blocks
umi-blocks

快速上手

環(huán)境準(zhǔn)備

首先得有 node，并確保 node 版本是 8.10 或以上珠增。（mac 下推薦使用 nvm 來管理 node 版本）

$ node -v
8.1x

使用 npm

其官網(wǎng)建議使用的是yarn超歌，但是本人用的是npm，所以全程npm蒂教，你需要適應(yīng)我巍举。

npm -v

全局安裝 umi，并確保版本是 2.0.0 或以上凝垛。

$ npm global add umi
$ umi -v
2.0.0

創(chuàng)建 umi 項目

首先懊悯，找個地方建個空目錄

$ mkdir my-umi-app && cd my-umi-app

然后使用 npm create umi 腳手架，創(chuàng)建模板：

$ npm create umi
# Choose ant-design-pro:
 Select the boilerplate type (Use arrow keys)
? ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
 app  - Create project with a simple boilerplate, support typescript.
 block  - Create a umi block.
 library  - Create a library with umi.
 plugin - Create a umi plugin.

選擇 ant-design-pro梦皮，是的炭分，你沒有猜錯，我們并不按照套路來剑肯。

為何選擇這個是有原因的捧毛，按照官網(wǎng)搭建出來的內(nèi)容，相對我們要使用的項目還有很遠的路要走让网，這個過程是持久且沒有意義的呀忧，ant-design-pro則為我們提供了一個模板，我們在這個模板上進行開發(fā)溃睹。

問詢 ? Which language do you want to use?而账，我們選擇JavaScript，這是為了降低入門的門檻因篇，所以這里決定使用js泞辐，如果你是大佬請忽視這個動作笔横。

$ npm install  # 安裝依賴，時間比較久
$ npm start  # visit http://localhost:8000

跑起來是這個樣子的铛碑。你可以簡單看看狠裹。

demo

你的項目目錄是這個樣子的：

├── config  # umi 配置，包含路由汽烦，構(gòu)建等配置
│  ├── config  # 配置包含路由等
│  ├── ... # 其他
├── mock  # 本地模擬數(shù)據(jù)
├── public
│  └── favicon.png # Favicon
├── src
│  ├── assets  # 本地靜態(tài)資源
│  ├── components  # 業(yè)務(wù)通用組件
│  ├── e2e # 集成測試用例
│  ├── layouts # 通用布局
│  ├── models  # 全局 dva model
│  ├── pages # 業(yè)務(wù)頁面入口和常用模板
│  ├── services  # 后臺接口服務(wù)
│  ├── utils # 工具庫
│  ├── locales # 國際化資源
│  ├── global.less # 全局樣式
│  └── global.ts # 全局 JS
├── tests # 測試工具
├── README.md
├── package.json
└── ... # 其他

可用的腳本

npm start # 運行這個腳本會啟動服務(wù)涛菠，自動打開默認瀏覽器展示你的頁面。當(dāng)你重新編輯代碼后撇吞，頁面還會自動刷新俗冻。
npm run build # 運行這個腳本將會編譯你的項目，你可以在項目中的 dist 目錄中找到編譯后的文件用于部署牍颈。
npm run lint # 通過這個腳本來查看你的代碼有哪些問題
npm test # 這個腳本會執(zhí)行一系列測試迄薄，包括 e2e 測試。
npm run i18n-remove # 這個腳本將會嘗試刪除項目中所有的 i18n 代碼煮岁，對于復(fù)雜的運行時代碼讥蔽，表現(xiàn)并不好，慎用画机。

你需要去這里簡單看看有哪些腳本可以使用：可用的腳本

主要目錄和文件介紹

config 目錄

├── config  # umi 配置冶伞，包含路由，構(gòu)建等配置
│  ├── config  # 配置文件：包含路由步氏、樣式响禽、proxy等
│  ├── defaultSettings # 默認設(shè)置：包括標(biāo)題title、navTheme等
│  ├── plugin.config # webpack的Plugin配置
│  ├── themePluginConfig # 風(fēng)格主題的配置

src 目錄

src/components組件目錄

src/components/Authorized組件

授權(quán)組件荚醒，路由權(quán)限的管理芋类。

關(guān)系：
index.jsx -> Authorized(內(nèi)容權(quán)限管理) -> CheckPermissions
          -> renderAuthorize（內(nèi)容渲染）
          -> Secured（判斷是否擁有權(quán)限訪問此 view 權(quán)限） -> CheckPermissions
          -> CheckPermissions（通用權(quán)限檢查方法） -> PromiseRender（promise渲染）

src/components/GlobalHeader組件

基礎(chǔ)布局的頭部，包含搜索界阁、用戶頭像侯繁、語言切換。

├── src/components
├── ...
├── GlobalHeader  # 基礎(chǔ)布局的頭部
│  ├── AvatarDropdown  # 用戶頭像下拉菜單
│  ├── NoticeIconView  # 通知圖標(biāo)和通知消息視圖
│  ├── plugin.config # webpack的Plugin配置
│  ├── RightContent  # 基礎(chǔ)布局的頭部核心：包含搜索泡躯、頭像贮竟、語言選擇

src/components/... 其他組件

HeaderDropdown:頭部下拉菜單，用于用戶頭像精续、搜索等坝锰。
HeaderSearch：頭部搜索組件粹懒。
NoticeIcon:頭部通知組件重付。
PageLoading:加載組件。
SelectLang：語言切換組件凫乖。

src/layouts布局

src/layouts/BasicLayout布局

基礎(chǔ)默認布局确垫，菜單弓颈、頂部、內(nèi)容删掀、頁腳翔冀。包含logo、菜單披泪、面包屑等纤子。

ant-design-pro的布局：

ant-design-pro的布局

src/layouts/SecurityLayout布局

安全布局，負責(zé)驗證是否登錄和登錄后跳轉(zhuǎn)加載款票，我們可以在這里寫自己的登錄認證規(guī)則控硼。

src/layouts/... 其他布局

UserLayout：用戶布局，用于登錄頁艾少。
BlankLayout：空白布局卡乾，用于打印頁面等不需要布局的頁面。

src/locales

國際化資源語言缚够，包含四種語言：簡體中文幔妨、繁體中文、英語谍椅、葡萄牙語误堡，如果使用國際化請注意它對諸如：菜單、消息提示等影響毯辅。如果你是國內(nèi)用戶埂伦，那么你可以忽略它。

src/models

全局 dva model

在 Ant Design Pro 中思恐，一個完整的前端 UI 交互到服務(wù)端處理流程是這樣的：

1.UI 組件交互操作沾谜；
2.調(diào)用 model 的 effect；
3.調(diào)用統(tǒng)一管理的 service 請求函數(shù)胀莹；
4.使用封裝的 request.ts 發(fā)送請求基跑；
5.獲取服務(wù)端返回；
6.然后調(diào)用 reducer 改變 state描焰；
7.更新 model媳否。

至于dva是什么？請看這里：dva.js

這里我們只需要知道它里面的文件內(nèi)容如下即可：

// model
{
  namespace: String, // 命名空間
  state: Object, // 狀態(tài)
  reducer: Object, // 同步更新 state
  effects: Object, // 副作用：處理異步邏輯
  subscriptions: Object // 訂閱數(shù)據(jù)源
}

這些文件被引用在src/pages/.umi/dva中荆秦。

我們以 models/global 為例:

namespace: 'global' 說明以下此處的dva命名空間為 global篱竭，即你調(diào)用的時候需要采用 global.XXX 的形式

其中的 state: {} 是存放狀態(tài)的，也就是數(shù)據(jù)步绸。

reducers 是用來更新 state 的掺逼，但是他只能是同步的。所以我們需要 effects 來進行異步更新瓤介。

即：

state: {
collapsed: false,
notices: [],
}, // 存放狀態(tài)和數(shù)據(jù)

  reducers: { // 用來同步設(shè)置state
    changeLayoutCollapsed(
      state = {
        notices: [],
        collapsed: true,
      },
      { payload },
    ) {
      return { ...state, collapsed: payload };
    },

    saveNotices(state, { payload }) {
      return {
        collapsed: false,
        ...state,
        notices: payload,
      };
    },
    // ...
 }

  effects: { // 異步更新state吕喘，通過調(diào)用同步的reducers實現(xiàn)
    *fetchNotices(_, { call, put, select }) {
      const data = yield call(queryNotices);
      yield put({
        type: 'saveNotices',
        payload: data,
      });
      const unreadCount = yield select(
        state => state.global.notices.filter(item => !item.read).length,
      );
      yield put({
        type: 'user/changeNotifyCount',
        payload: {
          totalCount: data.length,
          unreadCount,
        },
      });
    },
    // ...
 }

src/pages

業(yè)務(wù)頁面和常用模板

src/pages/document.ejs 默認html模板赘那，umi 約定如果這個文件存在，會作為默認模板氯质，內(nèi)容上需要保證有 <div id="root"></div>募舟，模板里可通過 context 來獲取到 umi 提供的變量。

user user業(yè)務(wù)邏輯內(nèi)容闻察，里面包含login登錄模塊拱礁，如果你需要更換登錄頁，請在這里處理辕漂。

通過 umi block add [block url] --path=[target path] 添加的區(qū)塊觅彰，將會被放置在pages目錄下。至于這個命令是做什么的钮热，我們目前先不做理會填抬。后面我會詳細說明。

src/services

服務(wù)請求層隧期，在 Ant Design Pro 中飒责，后臺接口服務(wù)需要寫在services文件下。當(dāng)然你也可以不那么做仆潮。

例如登錄的請求：

import request from '@/utils/request';
export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}
export async function getFakeCaptcha(mobile) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

不需要國際化

大多數(shù)國內(nèi)用戶是不需要國際化這種東西的宏蛉，一次我們需要移除它。

首先性置，使用umi自帶的移除國際化的腳本拾并。

npm run i18n-remove

這時已經(jīng)從系統(tǒng)級別移除了國際化的內(nèi)容，但是依然剩余了很多沒有用的文件和代碼鹏浅，需要我們手動進行處理嗅义。

再手動刪除 src/components/SelectLang 、 src/locales 隐砸、 src/pages/user/login/locales 文件夾之碗。

再從 src/components/GlobalHeader/RightContent 和 src/layouts/UserLayout 文件中移除關(guān)于 src/components/SelectLang 組件的引用。如下圖：

src/components/GlobalHeader/RightContent

src/layouts/UserLayout

再從 src/layouts/UserLayout.less 中移除lang的樣式：

src/layouts/UserLayout.less

完成后季希，我們的初始化就結(jié)束了褪那。

這是我構(gòu)建完后的github項目：https://github.com/nongshuqiner/my-AD-pro-init-template

結(jié)語

至此，一個初始可用的基于ant-design-pro的umi項目就構(gòu)建且說明完成了式塌，接下來就是根據(jù)這個umi項目去實戰(zhàn)umi官網(wǎng)上的指南了博敬。

提示：后面還有精彩敬請期待，請大家關(guān)注我的專題：web前端峰尝。如有意見可以進行評論偏窝，每一條評論我都會認真對待。

Umi + ant Design Pro最簡單的入門教程（一）初始