前言

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。这个库入门的门槛比较高，umi是这个样子的，umi = react + redux + react-router + ts + dva + umi脚手架 + ant Design Pro + ant Design UI + umi-block。如果你没有丰富的react基础你来学习他或者是看懂它，那将是很困难的一件事，本博客则是尽量把用户当做小白进行入门，如果你依然觉得困难，那么抱歉本人只能做到这样了。轻喷...

在开始之前，你一定要有react的基础，不然你来了只是白来，因为即使项目跑起来了，你也看不懂代码。我猜你需要这个：react入门-React + webpack 开发单页面应用

快速上手

环境准备

首先得有 node，并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

$ node -v

8.1x

使用 npm

其官网建议使用的是yarn，但是本人用的是npm，所以全程npm，你需要适应我。

npm -v

全局安装 umi，并确保版本是 2.0.0 或以上。

$ npm global add umi

$ umi -v

2.0.0

创建 umi 项目

首先，找个地方建个空目录

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

然后使用 npm create umi 脚手架，创建模板：

$ 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，是的，你没有猜错，我们并不按照套路来。

为何选择这个是有原因的，按照官网搭建出来的内容，相对我们要使用的项目还有很远的路要走，这个过程是持久且没有意义的，ant-design-pro则为我们提供了一个模板，我们在这个模板上进行开发。

问询 ? Which language do you want to use?，我们选择JavaScript，这是为了降低入门的门槛，所以这里决定使用js，如果你是大佬请忽视这个动作。

$ npm install # 安装依赖，时间比较久

$ npm start # visit http://localhost:8000

跑起来是这个样子的。你可以简单看看。

demo

你的项目目录是这个样子的：

├── config # umi 配置，包含路由，构建等配置

│ ├── config # 配置包含路由等

│ ├── ... # 其他

├── mock # 本地模拟数据

├── public

│ └── favicon.png # Favicon

├── src

│ ├── assets # 本地静态资源

│ ├── components # 业务通用组件

│ ├── e2e # 集成测试用例

│ ├── layouts # 通用布局

│ ├── models # 全局 dva model

│ ├── pages # 业务页面入口和常用模板

│ ├── services # 后台接口服务

│ ├── utils # 工具库

│ ├── locales # 国际化资源

│ ├── global.less # 全局样式

│ └── global.ts # 全局 JS

├── tests # 测试工具

├── README.md

├── package.json

└── ... # 其他

可用的脚本

npm start # 运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。

npm run build # 运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。

npm run lint # 通过这个脚本来查看你的代码有哪些问题

npm test # 这个脚本会执行一系列测试，包括 e2e 测试。

npm run i18n-remove # 这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

你需要去这里简单看看有哪些脚本可以使用：可用的脚本

主要目录和文件介绍

config 目录

├── config # umi 配置，包含路由，构建等配置

│ ├── config # 配置文件：包含路由、样式、proxy等

│ ├── defaultSettings # 默认设置：包括标题title、navTheme等

│ ├── plugin.config # webpack的Plugin配置

│ ├── themePluginConfig # 风格主题的配置

src 目录

src/components组件目录

src/components/Authorized组件

授权组件，路由权限的管理。

关系：

index.jsx -> Authorized(内容权限管理) -> CheckPermissions

-> renderAuthorize(内容渲染)

-> Secured(判断是否拥有权限访问此 view 权限) -> CheckPermissions

-> CheckPermissions(通用权限检查方法) -> PromiseRender(promise渲染)

src/components/GlobalHeader组件

基础布局的头部，包含搜索、用户头像、语言切换。

├── src/components

├── ...

├── GlobalHeader # 基础布局的头部

│ ├── AvatarDropdown # 用户头像下拉菜单

│ ├── NoticeIconView # 通知图标和通知消息视图

│ ├── plugin.config # webpack的Plugin配置

│ ├── RightContent # 基础布局的头部核心：包含搜索、头像、语言选择

src/components/... 其他组件

HeaderDropdown:头部下拉菜单，用于用户头像、搜索等。

HeaderSearch：头部搜索组件。

NoticeIcon:头部通知组件。

PageLoading:加载组件。

SelectLang：语言切换组件。

src/layouts布局

src/layouts/BasicLayout布局

基础默认布局，菜单、顶部、内容、页脚。包含logo、菜单、面包屑等。

ant-design-pro的布局：

ant-design-pro的布局

src/layouts/SecurityLayout布局

安全布局，负责验证是否登录和登录后跳转加载，我们可以在这里写自己的登录认证规则。

src/layouts/... 其他布局

UserLayout： 用户布局，用于登录页。

BlankLayout： 空白布局，用于打印页面等不需要布局的页面。

src/locales

国际化资源语言，包含四种语言：简体中文、繁体中文、英语、葡萄牙语，如果使用国际化请注意它对诸如：菜单、消息提示等影响。如果你是国内用户，那么你可以忽略它。

src/models

全局 dva model

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1.UI 组件交互操作；

2.调用 model 的 effect；

3.调用统一管理的 service 请求函数；

4.使用封装的 request.ts 发送请求；

5.获取服务端返回；

6.然后调用 reducer 改变 state；

7.更新 model。

至于dva是什么？请看这里：dva.js

这里我们只需要知道它里面的文件内容如下即可：

// model

{

namespace: String, // 命名空间

state: Object, // 状态

reducer: Object, // 同步更新 state

effects: Object, // 副作用：处理异步逻辑

subscriptions: Object // 订阅数据源

}

这些文件被引用在src/pages/.umi/dva中。

我们以 models/global 为例:

namespace: 'global' 说明以下此处的dva命名空间为 global，即你调用的时候需要采用 global.XXX 的形式

其中的 state: {} 是存放状态的，也就是数据。

reducers 是用来更新 state 的，但是他只能是同步的。所以我们需要 effects 来进行异步更新。

即：

state: {

collapsed: false,

notices: [],

}, // 存放状态和数据

reducers: { // 用来同步设置state

changeLayoutCollapsed(

state = {

notices: [],

collapsed: true,

},

{ payload },

) {

return { ...state, collapsed: payload };

},

saveNotices(state, { payload }) {

return {

collapsed: false,

...state,

notices: payload,

};

},

// ...

}

effects: { // 异步更新state，通过调用同步的reducers实现

*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

业务页面和常用模板

src/pages/document.ejs 默认html模板，umi 约定如果这个文件存在，会作为默认模板，内容上需要保证有

user user业务逻辑内容，里面包含login登录模块，如果你需要更换登录页，请在这里处理。

通过 umi block add [block url] --path=[target path] 添加的区块，将会被放置在pages目录下。至于这个命令是做什么的，我们目前先不做理会。后面我会详细说明。

src/services

服务请求层，在 Ant Design Pro 中，后台接口服务需要写在services文件下。当然你也可以不那么做。

例如登录的请求：

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}`);

}

不需要国际化

大多数国内用户是不需要国际化这种东西的，一次我们需要移除它。

首先，使用umi自带的移除国际化的脚本。

npm run i18n-remove

这时已经从系统级别移除了国际化的内容，但是依然剩余了很多没有用的文件和代码，需要我们手动进行处理。

再手动删除 src/components/SelectLang 、 src/locales 、 src/pages/user/login/locales 文件夹。

再从 src/components/GlobalHeader/RightContent 和 src/layouts/UserLayout 文件中移除关于 src/components/SelectLang 组件的引用。如下图：

src/components/GlobalHeader/RightContent

src/layouts/UserLayout

再从 src/layouts/UserLayout.less 中移除lang的样式：

src/layouts/UserLayout.less

完成后，我们的初始化就结束了。

结语

至此，一个初始可用的基于ant-design-pro的umi项目就构建且说明完成了，接下来就是根据这个umi项目去实战umi官网上的指南了。

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。