一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
Umi是什么?
说到Umi首先说明一下react、redux、redux-saga、react-router和umi、dva之间的一个关系，以便于我们能更好的理解Umi
1、react：实现UI界面的一个库，没有考虑数据的存储和流向的问题
2、redux：专门处理数据的存储和流向的问题
3、redux-saga：基于redux的，专门处理异步数据(Redux-Thunk用的也比较多)
4、dva是一个基于redux和redux-saga的数据流方案。
- redux和redux-saga是dva的一个基础，dva是一个实现数据流的，也就是实现仓库。
- 为了简化开发体验，dva内置了react-router和fetch。
Umi: 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系。
放一张比较出名的图，有助于我们理解他们之间的关系
搭建一个简单的Umi
全局安装脚手架
npm craete-umi -g
在对应文件夹下创建项目
yarn create @umijs/umi-app
安装完成之后你可以项目中生成了一个目录结构：
然后我们在目录结构中添加自己的目录测试一下，在pages下新建user/index
然后我们通过yarn start把代码跑起来，我们会发现控制台报一个错误 Cannot find module umi， 这个错误提示我们没有umi这个模块，所以我们还需要在控制台 yarn一下下载包， 然后我们在yarn start 把项目跑起来
这时看到浏览器上上面什么都没有，为什么呢？
我们找到.umirc.ts，发现有routes路由规则,所以无法进入我们输入的约定路由！，在umi文档中说：如果没有routes配置，Umi会进入约定式路由模式。而这里刚新建的项目是有这个路由的，所以无法进入约定式路由，是一个手动的路由，那么我们就需要删除这个路由规则数组
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
// routes: [
// umirc.ts文件中有routes,所以无法进入约定式路由。
// 因为umi文档中写道：如果没有 routes 配置，Umi 会进入约定式路由模式。
// 而这里刚新建的项目是有这个路由的，所以无法进入约定式路由，是一个手动的路由，那么我们就需要删除这个路由数组。
// { path: '/', component: '@/pages/index' },
// ],
fastRefresh: {},
});
然后我们在重启项目，就发先写在user/index里的文字就展示出来了
Umi中设置样式
Umi 中约定src/global.css为全局样式，如果存在此文件，会被自动引入到入口文件最前面。 我们在src下新建一个global.css文件（全局样式文件），这里面可以写页面的样式，全局使用。
.box {
width: 200px;
height: 200px;
background-color: yellow;
}
注意点： 样式写完之后项目需要重新启动才会生效。 重启项目看到效果就出来了
这个只是最最简单umi基础使用，后续我学习之后，会更新。
