umi框架的使用与总结

1,398 阅读2分钟

umi是什么?

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

什么是配置式路由和约定式路由

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

.umi 临时文件

.umi 临时目录是整个 Umi 项目的发动机,你的入口文件、路由等等都在这里,这些是由 umi 内部插件及三方插件生成的。

临时文件是 Umi 框架中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。

你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 umi 时都会被删除并重新生成。

快速上手

  1. 创建react17项目

---> mkdir myapp && cd myapp

---> yarn create umijs/umi-app

---> yarn start // 启动项目

在umirc.ts配置layout: {}

  1. 创建react18项目

---> mkdir myapp && cd myapp // 建个空目录

---> yarn create umijs // 创建项目

---> yarn // 安装依赖

---> yarn start // 启动项目

创建后的项目结构

package.json

包含插件和插件集,以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

.umirc.ts

配置文件,包含 umi 内置功能和插件的配置。

.env环境变量

PORT=8888 // 启动端口

COMPRESS=none

layouts/index.tsx

约定式路由时的全局布局文件。

pages 目录

所有路由组件存放在这里。

app.ts

运行时配置文件,可以在这里扩展运行时的能力,比如修改路由、修改 render 方法等。