前言

周五约了一家公司面试，因为我个人博客是使用前端是使用Antd Desgin Pro搭建的，公司正好也在使用Antd Desgin Pro ，面试官一直在问我Umi的问题，问了几个以后发现，现在虽然对Antd Desgin Pro还算了解，但是Umi的一些配置和插件，竟然有点没想起来。现在从0-1使用Umi搭建一个环境。加深自己对Umi的了解

Umi是什么？

Umi中文可发音为乌米，是可扩展的企业级前端应用框架,是蚂蚁金服的底层前端框架.

为什么要使用Umi？相较于create-app-react的优势在哪里?

Umi

• Umi内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
• Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

create-app-react

• 基于Webpack的打包层方案，在打包层的体验做到了机制，但是未内置路由，数据流等功能。

创建Umi项目

安装Umi

yarn create @umijs/umi-app

安装依赖

yarn

运行，查看效果

yarn start

Umi 默认是支持TypeScrpit的，目前博主也在使用Ts进行开发，如果需要使用JS，可以自行网上找一下解决方案

Umi的配置

.umirc文件

配置文件，包含 umi 内置功能和插件的配置

我们先来看一下，最原始的.umirc文件

不一样的小伙伴不要慌，博主是先搭了一遍，再进行知识积累的。

配置路由

我之前是使用Antd Desgin Pro，所以遵从Antd Desgin Pro的规范，在根目录下新建config文件夹，在config文件下，新建routes.ts文件

routes.ts文件

创建页面文件这一步骤，各位小伙伴可以自行创建下，这里就不再重新创建了

根据上图，可以看到，我使用了路径别名@的形式，在Umi中默认配置了@的类型别名。@指向了src目录

路由常用的Api

• title : 页面标题
• exact : 是否开启严格模式
• path : url路径
• component : 渲染的组件
• wrappers : 路由的权限校验
• routes : 子路由

运行页面，查看效果

/:登录页面

/user：首页

跳转页面

history 获取当前的路由信息，是Umi内置的一个路由Api

我们打印一下看一下都返回了什么

history常用的Api

• action: 有 PUSH、REPLACE 和 POP 三种类型
• push()：跳转路由，参数是url，例如，history.push('/user')
• goBack(): 返回上一个路由
• location.query 携带参数Obj

不带参数跳转

效果图

带参数跳转

效果图

第二种带参数跳转

如果参数不是太多，只是一个或者两个，建议使用第一种方式跳转，过长的话，建议使用第二种方式传递

在根目录下新建app.tsx文件，

onRouteChange()在初始加载和路由切换时触发

这个方法，在业务开发中，我们通常会用于判断一些权限，或者用户的token是否失效。或许有其他的用途，小伙伴可以自行拓展

rootContainer()在初始加载时触发，修改交给 react-dom 渲染时的根组件

通过打印container 我们发现这个参数是一个vDom，既然是vDom肯定是可以渲染到页面上的，这时候想到官方对这个函数的介绍，在联想我们使用React-Redux中需要在最外层的父组件上去包裹一层。所以我们先创建一个最外层的元素

我们给创建的元素打上一个标识 id，同时再把接受到的props.children 渲染进来。

效果图

src/app.tsx在我看来，可能会用到的就是这两个方法。目前我还未能有机会在正式的项目中使用Umi，只是在个人博客项目中使用，如果有不对的对方，欢迎大佬指教.

config/config.tsx文件的常用配置项

config/config.tsx文件下声明config变量，将其通过扩展运算符的形式，拼接在.umirc文件下

404 页面的展示

在日常开发中，如果用户打开一个不存在的url地址，是需要给用户展示一个404页面的。在Umi中，我们可以在routes.ts文件下，去配置一个规则

创建404页面,src/[ages/404.tsx在pages文件夹下，新建404.tsx文件

routes.ts文件

效果图

base 路由前缀

效果图

title 整体标题

如果不再设置路由的时候设置title属性，默认显示的title标题

效果图

targets:配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换

dynamicImport 网络过慢，显示的等待页面，通常是一个Loading

可以自行刷新下看效果

favicon 标题logo

效果图

fastRefresh热更新

hash 配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存

outputPath 输入文件夹名称

执行yarn run build命令后，查看效果图

plugins 额外的Umi插件，这个后续会额外开一篇文章，重新总结

 plugins:[]

disableRedirectHoist: 禁止重定向上提

disableRedirectHoist: true,

proxy 配置反向代理

通常会在config文件夹下，新建一个proxy.ts文件，

周末加班改BUG是什么体验，下周会再总结一些Umi插件。上述有不对的地方欢迎各位大佬指正