umi框架的使用

Posted 2023-03-13

参考技术A umi官方文档

对比以往使用的 create-react-app 搭建react项目，根据需要我们还得集合webpack打包，或者引入redux状态管理器等，而umi ---
通过 create-umi提供脚手架能力，
然后我们可以选择需要生成的项目类型：

确定后，会根据选择自动创建好目录和文件

安装依赖， yarn start 启动项目。

umi 以路由为基础的，支持类 next.js 的 约定式路由 ，以及各种进阶的路由功能，并以此进行功能扩展，比如支持 路由级的按需加载 。

(1) 无需手动配置路由
根据pages目录自动生成路由配置，会根据 src / pages 下 文件名自动生成路由
（也可以配置.umirc.js中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析）
(2) 其他基础知识：

(3)常用的路由操作

(1)全局layout
约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。
比如：

(2)不同的全局layout
可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。
比如想要针对 /login 输出简单布局:

(3)尝试
要求： 登录页和首页显示不同的布局

同样对 location.path 做区分，但是如果是动态路由或者嵌套路由这样的匹配是有漏洞的。

优化后：
配置路由对应的布局，默认使用NavigatorLayout

根据正则判断

用之前先把mock使用示例看看==> mock.js文档
(1)在umi中使用mock：