• Umi3实战教程

    一、框架介绍

    umi是蚂蚁金服的前端开发框架，它内置了路由、web/移动端UI库、数据流、权限控制、常用hooks库、构建、部署、测试、等等一些工具，几乎涵盖了正常前端开发要用到的所有工具。

    image-20231017133153379

    二、环境准备

    1. pnpm

      相比npm、yarn，pnpm更小+更快+扁平化+默认支持monorepo，有诸多有点。想要了解更多详细，可以参考这篇文章：pnpm实战教程

    2. 镜像管理工具

      推荐使用镜像管理工具：

      • 如果本地使用 npm/pnpm 管理nodejs包：则安装nrm

      • 如果本地使用 yarn 管理nodejs包：则安装yrm

    //这里使用yrm
npm i nrm -g
npm i yrm -g

    • 1
    • 2
    • 3

    查看镜像地址列表：yrm lsimage-20231017134846253

    测试每个镜像地址的响应时间：yrm test，最快的镜像会被标绿色背景。

    image-20231017134903738

    切换镜像地址：yrm use taobao,切换到淘宝地址。

    image-20231017134931858

    查看当前使用镜像地址：

    yrm ls
yrm current

    • 1
    • 2

    image-20231017135028593

    1. 创建umi项目

      mkdir umi-test && cd umi-test
yarn create @umijs/umi-app #npx @umijs/create-umi-app
yarn install	#安装依赖
yarn start		#启动项目

      • 1
      • 2
      • 3
      • 4

      在浏览器里打开 http://localhost:8000/，能看到以下界面，

    img

    三、目录结构

    一个基础的 Umi 项目大致是这样的：

    .
├── package.json
├── .umirc.ts				// umi配置，同config/config.js，二选一
├── .env					// 环境变量
├── dist					// 默认 build 输出目录
├── mock					// mock 文件所在目录，基于express
├── public					// 此目录下所有文件会被 copy 到输出路径。
└── src
    ├── .umi				// 临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
    ├── layouts/index.tsx	// 全局布局
    ├── models				// 数据流
    ├── wrappers			// 权限管理
    ├── global.js			// 可以在这里加入polyfill
    ├── global.css			// 约定的全局样式文件，自动引入，也可以涌入global.less
    ├── pages				// 页面
        ├── index.less
        └── index.tsx
    └── app.ts				//运行时配置文件，可以在这里扩展运行时的能力

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    更多目录说明请参照 官网

    四、构建时配置

    umi在.umirc.ts或config/config.ts中配置项目和插件：

    image-20231017142537350

    1. nodeModulesTransform：设置 node_modules 目录下依赖文件的编译方式。

      nodeModulesTransform: {
    type: "none",	//不变异node_modules中的文件
    exclude:""		//忽略的依赖库，包名，暂不支持绝对路径
},

/*
nodeModulesTransform: {
    type: "all",	//全部编译
    exclude:""		//不需要编译的依赖库；
},
*/

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    2. fastRefresh：快速刷新

      开发时可以保持组件状态，同时编辑提供即时反馈。

      fastRefresh: {}	//开启

      • 1

    开启前：

    image-20231017144242487

    开启后：

    image-20231017144544912

    1. devServer：配置开发服务器。

      包含以下子配置项：

      • port，端口号，默认 8000
      • host，默认 0.0.0.0
      • https，是否启用 https server，同时也会开启 HTTP/2
      • writeToDisk，生成 assets 到文件系统
    devServer: {
    port: 9999
}

    • 1
    • 2
    • 3

    配置开发服务的端口还有其他方式：

    • 配置 .env 环境变量

      #根目录下创建 .env 文件
PORT=8888

      • 1
      • 2

    • 脚本中设置端口

    #全局安装cross-env
npm i -g cross-env

# package.json
"scripts": {
	"start": "cross-env PORT=3999 umi dev",
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    这三种配置的优先级依次是：脚本中设置端口 > 配置 .env 环境变量 > devServer中设置port

    1. title：设置标题

    image-20231017150147103

    1. favicon：icon图标

      favicon: "/favicon.ico"

      • 1

      根目录新建public/favicon.ico图标，刷新页面，就可以看到图标已经变了。

      image-20231017151143410

    2. dynamicImport：按需加载

      umi打包时，默认是把所有js文件打包到同一个umi.js文件中，如下图所示：

    image-20231017153758879

    这种打包方式当我们的项目不断扩展变庞大之后，umi.js将会变得非常臃肿，导致在首屏加载时很慢，所以我们可以使用dynamicImport开启按需加载，即是否把构建产物进行拆分，在需要的时候下载额外的 JS 再执行。

    dynamicImport: {}

    • 1

    再执行yarn build打包后，我们可以看到dist目录中文件就已经被分包，如图：

    image-20231017154117257

    我们还可以借助dynamicImport.loading属性，配置加载过程中的loading提示组件。

        dynamicImport: {
        loading: "@/pages/Loading"
    }

    • 1
    • 2
    • 3

    创建src/pages/Loading/index.tsx，代码如下：

    export default function IndexPage() {
    return (
        
    
            loading...
        
    
    );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    然后我们再刷新页面时，可以看到loading...提示。仔细的话可以看到，loading... 出现了两次：

    • 根页面加载时
    • 框架容器内页面加载时

    如图：

    loading

    1. 根模版路径

      如果需要自定义html默认文件，那么就创建src\pages\document.ejs文件。

    2. mountElementId：指定 react app 渲染到的 HTML 元素 id。

      默认id是root，如果使用mountElementId指定的id和document.ejs中的不一致，那么会自动创建一个mountElementId指定的id的div节点。

      例如：

      # config/config.ts
mountElementId: "root2"

# document.ejs
<body>
  <div id="app3"></div>
</body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

      运行时，我们打开页面显示源码，可以看到：

      image-20231017161200060

    五、使用Web/移动端antd组件

    import styles from './index.less';
import Header from '@/pages/header';
import { useState } from 'react';
import { Button } from "antd";
import { Button as MButton } from "antd-mobile";

export default function IndexPage() {
  return (
    
    
      
    
      
    Page index-333
    
      
      Mobile按钮
    
    
  );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    效果如下：

    image-20231017162017579

    需要注意的是：

    umi中默认内置了antd移动端的v2和v5版本，那么在默认安装项目时安装了@umijs/preset-react": "1.x"，这是一个比较老的版本，我们需要更新到最新，这样默认就是v5版本，如果需要使用v2则：import { Button as MButton } from "antd-mobile-v2";

    我们在node_modules中可以看到默认安装了antd-mobile和antd-mobile-v2：

    image-20231017163313670

    yarn remove @umijs/preset-react #先删除
yarn add @umijs/preset-react	#再安装

    • 1
    • 2
    import styles from './index.less';
import Header from '@/pages/header';
import { Button } from "antd";
import { Button as MButtonV5 } from "antd-mobile";//v5版本
import { Button as MButtonV2 } from "antd-mobile-v2";//v2版本

export default function IndexPage() {
  return (
    
    
      
    
      
    Page index-333
    
      
      Mobile-v2按钮
      Mobile-v5按钮
    
    
  );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    image-20231017164458843

    六、theme：主题

    1、web端主题

    theme:{
    '@primary-color': '#1DA57A',
}

    • 1
    • 2
    • 3

    上述代码只是修改了web的主题，并不影响移动端的主题配色，如上配置后，可以看到下图只是web端的Button的颜色有了改变。

    image-20231017164828495

    2、移动端主题

    要修改移动端主题，我们可以通过src/global.less全局样式中覆写。这里以修改主题色为例：

    :root:root {
    --adm-color-primary: red;
}

    • 1
    • 2
    • 3

    image-20231017170115217

    可以看到移动端v5对应的主题色已经变更。

    七、引入静态资源

    1、引入图片

    • 引入src/assets图片
    • 引入public图片
    //index.tsx
import user from "@/assets/images/user.png";
import "./index.less";
import styles from "./index.less";

export default function IndexPage() {
  return (
    
    
      
    1、调用 src/assets 中的图片
    
      
      
      

    

      
    2、调用 public 中的图片
    
      

      
    3、从 assets/images 中拿图片
    
      
    4、从 public 中拿图片
    
    
    
  );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    //index.less
.img1,
.img2 {
  width: 200px;
  height: 80px;
  color: white;
  margin-top: 5px;
}

.img1 {
  background: url("~@/assets/images/bg.jpg");
}

.img2 {
  background: url("/img/bg.jpg");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    image-20231017182418022

    2、引入css样式

    上述在引入css中class时，使用了两种方式：

    • 全局引入：

      import "./index.less";
<div className="img2">4、从 public 中拿图片</div>

      • 1
      • 2

    • 模块化引入：

      import styles from "./index.less";
<div className={styles.img1}>3、从 assets/images 中拿图片</div>

      • 1
      • 2

    全局引入的话，可能会造成全局污染；模块化引入，会给每个class加上随机序列号，避免全局污染；

    image-20231017183452849

  • 相关阅读:
    邮件群发工具哪个好
    基于.net的应用开发技术-作业六
    芯片工艺PVT STA分析 OCV分析
    socket、websoket、netty、socket.io 对比
    tensorflow切片
    【总结】各种Linux上安装git的方法
    【接口性能优化】一、SQL优化篇
    在Qt设计师（Qt Designer ）控件面板加入自定义控件
    analog IC layout-Design for reliability
    【openwrt学习笔记】新patch的制作和旧patch的修改
  • 原文地址：https://blog.csdn.net/bobo789456123/article/details/133892555