Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
Umi.js需要使用Node.js来进行开发，首先需要确保电脑已经安装了Node.js且版本在14以上。
Node安装完成后会自带npm依赖管理工具，但是Umi推荐使用
pnpm作为依赖管理工具
根目录下
package.json
包含插件和插件集
.env
环境变量，比如：
PORT=8888
COMPRESS=none
.umirc.ts
与 config/config.ts文件功能相同， .umirc.ts文件优先级更高
配置文件，包含umi内置功能和插件的配置
config/config.ts
与 .umirc.ts文件功能相同，.umirc.ts文件优先级更高
配置文件，包含umi内置功能和插件的配置
dist目录
执行umi build后，产物会默认存到这里。可以通过配置修改产物的输出路径。
mock目录
存储mock文件，此目录下所有js和ts文件都会被解析为mock文件。用于本地的模拟数据服务。
public目录
此目录下所有文件会被copy到输出路径
src目录
.umi目录
dev时的临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交.umi目录到git仓库，他们会在umi dev时被删除并重新生成。
在配置文件中通过routes进行配置，格式是路由信息的数组。
比如
export default {
routes: [
{ path: '/', component: 'index' },
{ path: '/user', component: 'user' },
],
}
path
type：字符串
path只支持两种占位符配置，动态参数 :id 的形式、* 通配符，通配符只能出现在路由字符串的最后
以下是支持的路由路径配置形式
/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*
以下是不支持的路由配置形式：
/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
/files-*
component
type：string
配置location和path匹配后用于渲染的react组件路径，可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages开始找起。
src可以用@代替。
routes
配置子路由，格式为路由数组
比如：
export default {
routes: [
{ path: '/login', component: 'login' },
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/list', component: 'list' },
{ path: '/admin', component: 'admin' },
],
},
],
}
然后在src/laouts/index中通过渲染子路由
import {Outlet} from 'umi'
export default (props) => {
return <div style={{ padding: 20 }}>
<Outlet/>
</div>;
}
这样，访问 /list和/admin就会带上 src/layouts/index这个layout组件。
redirect
type:string
路由重定向
比如：
export default {
routes: [
{ path: '/', redirect: '/list' },
{ path: '/list', component: 'list' },
],
}
访问 / 时会重定向到 /list，并由src/pages/list 文件进行渲染。
wrappers
type：string[]
配置路由组件的包装组件，通过包装组件可以为当前的路由组件结合更多的功能。比如，可以用于路由级别的权限校验：
export default {
routes: [
{ path: '/user', component: 'user',
wrappers: [
'@/wrappers/auth',
],
},
{ path: '/login', component: 'login' },
]
}
然后在 src/wrappers/auth中
import { Navigate, Outlet } from 'umi'
export default (props) => {
const { isLogin } = useAuth();
if (isLogin) {
return <Outlet />;
} else{
return <Navigate to="/login" />;
}
}
这样，访问/user，就通过auth组件做权限校验，如果通过，渲染src/pages/user，否则跳转到 /login
title
type：string
配置路由的标题
使用 history 或者 useNavigate进行跳转
比如：
import { Link } from 'umi';
export default () => (
<div>
<Link to="/users">Users Page</Link>
</div>
);
点击 Users page 就会跳转到 /users 地址
match信息
useMatch
location信息
useLocation
useParams
useSearchParams
你可以在umi项目中使用 .css文件声明各种样式，然后在.js文件中引入即可生效。
按照此种引入方式的样式会在整个umi项目中生效，即无论你从哪个 .js文件引入，他声明的样式可以在任何页面和组件中使用。如果你想避免这种情况，可以使用 css modules的功能来限制样式的作用域
使用css Modules
在js文件中引入样式时，赋予他一个变量名，就可以将样式以 css module的形式引入。
import styles from './index.css';
export default function () {
return <div className={styles.title}>
Hello World
</div>;
}
上面示例中，index.css文件中声明的样式不会对全局样式早成影响，他的作用域仅仅是该js文件。
react的组件只是通过jsx以及样式按照state构建最终的UI，真正将页面动态化的实际上是state的变化实现的。对于简单的前端应用，在组件中通过组件自身的state加上父组件传过来的props就能够满足应用数据管理的需求，但是当应用膨胀到一定程度后就会导致组件内维护的状态非常复杂，加上组件之间的状态传递，很容易导致数据管理混乱。很小的改动都可以导致难以预料的副作用。
umi内置了dva提供了一套状态管理方案
数据统一在 src/models 中的model管理，组件内尽可能的不去维护数据，而是通过connect去关联model中的数据。页面有操作的时候则触发一个action去请求后端接口以及修改model中的数据，将业务逻辑分离到一个环形的闭环中。使得数据在其中单向流动。让应用更好的进行维护。