umijs 解决的问题：中后台项目开箱即用，只专注业务逻辑

umi4 设计思路视频 https://www.bilibili.com/video/BV1sL4y1b7ca

前端抽象

  1. 渲染
  2. 路由
  3. 构建编译
    1. webpack
    2. vite
    3. esbuild
  4. 代码质量测试

插件

  1. 前后端接口联调, OneAPI
  2. 可视化搭建，混合研发
  3. 约束规范
  4. 运行时编译提速
  5. 监控平台接入
  6. 埋点
  7. 部署
  8. 前台官网
  9. H5

插件集成

  1. react
  2. react-dom
  3. react-router
  4. jest

监控

image.png

开箱即用的中台前端/设计解决方案
简单点说，它是一套基于 Ant Design 的脚手架，umi 内置了 antd 和 antd-mobile，直接使用，antd 和 antd-mobile 的组件

  1. umi把项目的工程化配置都做好，你只需要专注于业务开发就行
  2. Ant Design 定义了基础的设计规范，和基础组件，团队开发，保持一致非常重要
  3. umi 提供了灵活而强大的插件机制，可以通过插件和插件集的方式从各个方面进行扩展

umi架构图
umi架构.png
umi 从源码到上线的一个流程
image.png
https://zhuanlan.zhihu.com/p/68679617

Umi 技术栈

  • TypeScript - 在 JavaScript 基础上增加了静态类型支持
  • React - UI 库
  • React Router - React 导航组件
  • Ant Design，一个 React 组件库
  • Antd Pro - 采用了 Ant Design 组件库的完整前端脚手架
  • Antd Mobile 移动端适配
  • Dva，基于 redux 和 redux-saga 的数据流方案
  • Father - 基于 Rollup 和 Babel 的打包工具
  • AntV - 数据可视化方案
  • PostCSS - 用 JavaScript 工具和插件转换 CSS 代码的工具
  • WebPack - 模块打包器
  • Babel - JavaScript 语法编译器

ts项目改成 js项目

Umi3 默认生成 ts文件
ts项目改成 js项目

  1. 修改 .umirc.ts 为 .umirc.js
  2. Pages 目录下 index.ts修改为 index.js

umi3项目工程化配置
https://www.yuque.com/lulongwen/react/zsrfd5

深入理解 umi
https://www.yuque.com/ant-design/course/tydf0a
https://www.yuque.com/aspirantzhang/antdprov5/
https://github.com/bei-yang/I-want-to-be-an-architect

block区块

区块，拿来即用的组件
https://github.com/ant-design/pro-blocks

  1. # 添加 umi区块
  2. umi block add [block github url]
  4. umi block add https://github.com/ant-design/pro-blocks/tree/master/AccountCenter --path=/knowledge