umi是什么?
中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
什么是配置式路由和约定式路由
Umi 的路由既支持配置式,又支持约定式。配置式是对于现实的低头,也是大部分用户在用的,因为他功能强大;约定式是我们希望走去的方向,因为他简洁优雅。
.umi 临时文件
.umi 临时目录是整个 Umi 项目的发动机,你的入口文件、路由等等都在这里,这些是由 umi 内部插件及三方插件生成的。
临时文件是 Umi 框架中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。
你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 umi 时都会被删除并重新生成。
快速上手
- 创建react17项目
---> mkdir myapp && cd myapp
---> yarn create umijs/umi-app
---> yarn start // 启动项目
在umirc.ts配置layout: {}
- 创建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 方法等。