1.什上Umi?
- Umi 是蚂蚁金服底层的前端框架(经妈蚁内部 5000+ 项目验证)
- Umi 是以路由为基础的企业级React框架(同时支持配置式路由和约定式路由)
- Umi 是一个“可插拔”的企业级React框架(内部能完全使用插件化完成的
结论：Umi是蚂蚁金服底层的、以路由为基础底层、内部功能完全使用插件化完成的React框架
如何使用
// 1. 安装umi npm install umi // 创建页面 - npx umi g page index //运行项目 - hpx umi dev
Umi 是以路由为基础的企业级React框架(同时支持配置式路由和约定式路由)
什么是约定式路由?
约定式路由也叫文件路由，就是不需要手写配置路由，通过目录和文件及其命名分析出配置在Umi下pages目录下面的react组件文件名就是路由名称，Umi会帮我们自动生成路由
路由.png
Umi手动配置路由
目录结构.png
官方网站：
.umirc.ts——配置文件，包含 umi 内置功能和插件的配置。
（umi run config，所以需要重新启动才有效）
// umirc.js export default { routes: [ { exact: true, path: '/', component: 'index' }, { exact: true, path: '/home', component: 'home' }, { exact: true, path: '/about', component: 'about' }, ], }
umi全局文件
layout文件夹下对umi的组件配置公共组件,比如说一般一个王章的导航头部和尾部都是固定的，那么就是一个公共组件，可以放在layout
//layouts/index.js import React from 'react' import Style from './index.css' export default (props)=>{ return( <> <div className={Style.header}>头部</div> <div className={Style.main}>{props.children}</div> <div className={Style.footer}>底部</div> </> ) }
//layouts/index.css .header{ background-color: aqua; } .main{ background-color: royalblue; } .footer{ background-color: #ccc; }
