前端项目中react-umi框架的简单用法

做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。

umi官网地址 ：https://umijs.org/zh-CN/docs/getting-started
dva地址： https://dvajs.com/

先简单了解一下什么是umi：

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

它主要具备以下功能：

可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

看一下官网的技术介绍

配置式路由和约定式路由：
Umi 的路由既支持配置式，又支持约定式。配置式是对于现实的低头，也是大部分用户在用的，因为他功能强大；约定式是我们希望走去的方向，因为他简洁优雅。

简单来说，Umi就是一个支持约定式路由和配置式路由的大杂烩，他整合了所有React生态的东西，Antd、Dva等等，把他们都当成了Umi的插件，我们想使用的时候，直接通过配置就能使用。

好了开始配置
环境准备
首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

$ node -v （检查版本至少是v10.13.0）

国内源

$ npm i yarn tyarn -g
后面文档里的 yarn 换成 tyarn
$ tyarn -v （检查版本号是否安装成功）

阿里内网源

$ tnpm i yarn @ali/yarn -g
后面文档里的 yarn 换成 ayarn
$ ayarn -v （检查版本）

脚手架：先找个地方建个空目录。
$ mkdir myapp && cd myapp
通过官方工具创建项目：$ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app
安装依赖 ：$ yarn install
启动项目：$ yarn start

当然有的时候可能会不支持 $ tnpm i yarn @ali/yarn -g操作和$ mkdir myapp && cd myapp
所以我们分开逐个执行命令就好了

npm i yarn tyarn -g
mkdir myapp 
cd myapp
yarn create @umijs/umi-app
yarn install
yarn start

执行成功后就是这个页面了
目录结构
可以看到Umi实际上就只有src下的一个pages文件夹（.Umi文件不用管，是项目启动之后动态构建的），内置了Dva（@umijs/plugin-dva），antd（@umijs/plugin-antd）等功能。我们只需要写页面组件就好了。是不是可爽。

修改配置
（除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。
如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。）
默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。
即：

yarn add @ant-design/pro-layout。
然后我们在 .umirc.js 文件内直接写入 layout: {} , 即可

不用重启 yarn start，webpack 会在背后增量编译，过一会就可以看到以下界面，

今天就先到这里，后期在更新编辑。