快速上手企业级前端开辟：深入明白 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 这里不再赘述，按钮下令如下：

1. pnpm dlx create-umi@latest

复制代码

实验安装下令填写完项目名称之后，然后就进入到选择umi模板的选项，四个选项很简单，如下：
   Simple App：默认安装模板，采取react
  Ant Design Pro：须要举行 Umi Max 开辟的模板
  Vue Simple App：采取vue语法的模板
  Umi Plugin：采取Umi插件的模板
  这里我们就默认选择第一个 Simple App 模板举行讲授吧：

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

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

安装完成之后，回到我们的编辑器，终端实验 pnpm run dev 下令即可运行项目：

固然这里我们也可以安装一些常用的第三方库，以备背面的项目使用到：

1. pnpm i antd qs styled-components @umijs/plugins

复制代码