前端开发框架react的Umi，中文发音为五米，是一个可扩展的企业级前端应用框架。umi基于路由，同时支持配置路由和约定路由，保证路由功能完备，并以此扩展功能。进而配备全生命周期的插件系统前端培训，覆盖从源代码到构建产品的每一个生命周期，支持各种功能扩展和业务需求。它主要有以下功能：1.可扩展。Umi实现了完整的生命周期，并使其插件化。Umi的内部功能都是通过插件来完成的。此外，还支持插件和插件集，满足功能和垂直领域的分层需求。2.开箱即用，Umi内置路由、构建、部署、测试等，只需要一个依赖即可开始开发。并且还为React提供了集成的插件集，功能丰富，可以满足80%的日常开发需求。为什么不？create-react-appcreate-react-app是基于webpack的封装层解决方案，包括build、dev、lint等，在封装层最大化体验，但不包括路由、框架、配置。所以，如果你想在他的基础上修改一些配置，或者想在封装层之外做技术衔接，就会遇到困难。#创建目录$mkdirmyapp&&cdmyapp#安装依赖$yarnaddumi#创建页面$npxumigpageindex--typescript--less#开始开发$npxumidev目录约定├──dist///默认构建输出directory├──mock///mock文件所在目录，基于express├──config/├──config.js//umi配置，同.umirc.js，二者选其一└──src/config/sourcecode//目录，可选├──layouts/index.js//全局布局├──pages///页面目录，里面的文件是路由├──.umi///dev临时目录，需要添加到.gitignore├.umi-production///建立临时目录，会被自动删除├──document.ejs//HTML模板├──404.js//404页├──act1.js1//exportanypageComponents├──page1.test.js//用例文件，umitest会匹配所有以.test.js和.e2e.js结尾的文件└──page2.js//页面2，任意命名├──global.css//约定的全局样式文件，自动导入，也可以使用global.less├──global.js//这里可以加polyfill├──.umirc.js常规路由也叫文件路由，也就是说不需要手动配置。文件系统就是路由，通过目录、文件及其命名来分析路由配置。如果没有路由配置，Umi会进入常规路由模式，然后解析src/pages目录获取路由配置。约定src/layouts/index.js为全局路由，返回一个React组件，通过props.children渲染子组件。└──src├──layouts│└──index.tsx└──pages├──index.tsx├──users.tsx自定义全局布局如下：importReactfrom'react'import{IRouteComponentProps,Link}from'umi'exportdefaultfunctionLayout({children,location,route,history,match}:IRouteComponentProps){//returnchildrenreturn(<>
