Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
1️⃣了解Umi |
你可以将Umi简单的理解为一个专注性能的类 next.js 前端框架,并通过约定、自动生成和解析代码等方式来辅助开发,减少我们开发者的代码量。
功能特点 |
- 开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。
- 完善的插件体系,Umi 实现了完整的生命周期,并使其插件化。此外还提供针对 React 的集成插件集。
- 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
技术收敛 |
蚂蚁金服前端框架
Umi把大家常用的技术栈进行整理,收敛到一起,让大家只用 Umi 就可以完成 80% 的日常工作。
Bigfish 企业级前端开发框架,与常见的前端框架和工具不同,它从工程角度集成了各类功能,从初始化开发到最终上线整套技术方案,解决了前端开发经常遇到的前端技术栈整合配置麻烦、开发联调麻烦、前端资源发布上线麻烦三大痛点。
创建第一个Umi应用 |
# 使用 yarn 管理 npm 依赖 使用国内源 之后使用tyarn代替yarn即可
$ npm i yarn tyarn -g
# 创建目录
$ mkdir myapp
# 进入目录
$ cd myapp
# 通过官方工具创建项目
$ yarn create @umijs/umi-app
# 安装依赖
$ yarn
# 启动开发
$ yarn start
启动页面效果 和 当前项目结构
.umi 临时文件 |
.umi 临时目录是整个 Umi 项目的发动机,你的入口文件、路由等等都在这里,这些是由 umi 内部插件及三方插件生成的。
+ .umi
+ core # 内部插件生成
+ pluginA # 外部插件生成
+ presetB # 外部插件生成
+ umi.ts # 入口文件
临时文件是 Umi 框架中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。
你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 umi 时都会被删除并重新生成。
修改配置换个页面布局 |
默认的脚手架内置了 @umijs/preset-react,包含布局、权限、国际化、dva、简易数据流等常用功能。
想使用 ant-design-pro 的布局
- 添加
@ant-design/pro-layout
依赖
yarm add @ant-design/pro-layout
- 编辑
.umirc.ts
文件,加入布局配置项+layout:{},
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
layout:{},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {},
});
部署发布 |