介绍

Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用，包括 Java、Node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用、Electron 应用、Serverless 应用等。他已经很好地服务了我们的内部用户，同时也服务了不少外部用户，包括淘系、飞猪、阿里云、字节、腾讯、口碑、美团等。在 2021 年字节的调研报告中，Umi 是其中 25.33% 开发者的选择。 官网

特点

1. 企业级，在安全性、稳定性、最佳实践、约束能力方面会考虑更多
2. 插件化，啥都能改，Umi 本身也是由插件构成
3. MFSU，比 Vite 还快的 Webpack 打包方案
4. 基于 React Router 6 的完备路由
5. 默认最快的请求
6. SSR & SSG
7. 稳定白盒性能好的 ESLint 和 Jest
8. React 18 的框架级接入
9. Monorepo 最佳实践

创建app

cmd
# 在当前文件夹下创建项目
pnpm create umi
# 在当前目录的 my-umi-app 文件夹下创建项目
pnpm create umi my-umi-app

你可以从以下几个选项中选择习惯的 Node 依赖管理工具：

• npm
• cnpm
• tnpm
• yarn
• pnpm (Umi 官方推荐)

Pick Npm Registry - 选择 Npm 源

• npm
• taobao

结构

.
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── assets
│   │   └── yay.jpg
│   ├── layouts
│   │   ├── index.less
│   │   └── index.tsx
│   └── pages
│       ├── docs.tsx
│       └── index.tsx
├── tsconfig.json
└── typings.d.ts