快速上手企业级前端开发：深入理解 UMI 框架

UMI是蚂蚁金服的底层前端框架，也是一个基于React的企业级前端应用框架，它提供了开箱即用的项目脚手架和插件化的配置，如路由构建、部署测试、文档工具、请求库等，帮助开发者快速搭建和管理复杂的前端项目，其设计目标是提高前端项目的开发效率和可维护性，尤其适用于大型复杂项目的开发与管理。

目录

初识UMI

目录分析

UMI项目配置

初识UMI

我们以前在使用react脚手架开发项目时要经过一些大量的配置，如果我们需要数据交互的话需要安装数据交互的请求库，如果需要状态管理则需要安装一些第三方的状态管理，当需要用到UI组件布局时则需要自行安装加配置一些移动端和PC端的一些组件库，当需要进行路由跳转时则需要安装一些第三方的路由插件等等，需要做一些大量的配置方面的东西。

今天讲解的UMI，中文发音为「乌米」则是将这些常用的技术栈进行一个收纳，也就是当我们安装UMI之后这些配置以及默认帮我们装好且做了一些默认的配置，由此可以省下我们的精力专注于业务开发，这里我们查阅一下 官方文档，可以看到目前的UMI已经迭代到4.3.6版本了(博主当时最新)，如下图所示：

学习UMI的话分两块学习，一种就是单纯的umi.js正常项目开发；另一种就是umi max(ant design pro) 也就是设计体系的企业级中后台前端/设计解决方案。两者都会讲解到，今天我们先讲解一下前者的开发。

接下来我们就尝试一下使用umi这个框架进行开发项目吧，官方文档推荐我们使用pnpm，好吧那我们就使用pnpm进行搭建umi框架，没有pnpm的先全局安装一下 npm i -g pnpm 这里不再赘述，按钮命令如下：

pnpm dlx create-umi@latest

执行安装命令填写完项目名称之后，然后就进入到选择umi模板的选项，四个选项很简单，如下：

Simple App：默认安装模板，采用react

Ant Design Pro：需要进行 Umi Max 开发的模板

Vue Simple App：采用vue语法的模板

Umi Plugin：采用Umi插件的模板

这里我们就默认选择第一个Simple App 模板进行讲解吧：

接下来进入到要选择什么包管理工具，人家推荐 pnpm 的话就选择这个吧：

接下来进入到要选择什么镜像源，这里选择国内的淘宝镜像即可，选择完成之后等待一段时间安装即可：