Umi3实战教程

news/2025/2/16 0:35:45/

一、框架介绍

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

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

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

image-20231017134903738

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

image-20231017134931858

查看当前使用镜像地址：

yrm ls
yrm current

image-20231017135028593

  1. 创建umi项目

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

    在浏览器里打开 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				//运行时配置文件，可以在这里扩展运行时的能力

更多目录说明请参照 官网

四、构建时配置

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

image-20231017142537350

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

    nodeModulesTransform: {type: "none",	//不变异node_modules中的文件exclude:""		//忽略的依赖库，包名，暂不支持绝对路径
},/*
nodeModulesTransform: {type: "all",	//全部编译exclude:""		//不需要编译的依赖库；
},
*/

  2. fastRefresh：快速刷新

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

    fastRefresh: {}	//开启

开启前：

image-20231017144242487

开启后：

image-20231017144544912

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

    包含以下子配置项：

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

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

  • 配置 .env 环境变量

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

  • 脚本中设置端口

#全局安装cross-env
npm i -g cross-env# package.json
"scripts": {"start": "cross-env PORT=3999 umi dev",
},

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

  1. title：设置标题

image-20231017150147103

  1. favicon：icon图标

    favicon: "/favicon.ico"

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

    image-20231017151143410

  2. dynamicImport：按需加载

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

image-20231017153758879

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

dynamicImport: {}

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

image-20231017154117257

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

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

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

export default function IndexPage() {return (<div>loading...</div>);
}

然后我们再刷新页面时，可以看到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>

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

    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 (<div><Header /><h1 className={styles.title}>Page index-333</h1><Button>Web按钮</Button><MButton>Mobile按钮</MButton></div>);
}

效果如下：

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	#再安装

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 (<div><Header /><h1 className={styles.title}>Page index-333</h1><Button type='primary'>Web按钮</Button><MButtonV2 type='primary'>Mobile-v2按钮</MButtonV2><MButtonV5 color='primary'>Mobile-v5按钮</MButtonV5></div>);
}

image-20231017164458843

六、theme：主题

1、web端主题

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

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

image-20231017164828495

2、移动端主题

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

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

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 (<div><p>1、调用 src/assets 中的图片</p><img src={user} /><img src={require("@/assets/images/user.png")} /><br /><br /><p>2、调用 public 中的图片</p><img src="img/bg.jpg" width="200" /><div className={styles.img1}>3、从 assets/images 中拿图片</div><div className="img2">4、从 public 中拿图片</div></div>);
}

//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");
}

image-20231017182418022

2、引入css样式

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

  • 全局引入：

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

  • 模块化引入：

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

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

image-20231017183452849


http://www.ppmy.cn/news/1168505.html

相关文章

专访 Web3Go 新产品 Reiki：培育 AI 原生数字资产与创意新土壤

专访 Web3Go 新产品 Reiki：培育 AI 原生数字资产与创意新土壤

从 DeFi 到 NFTFi、SocialFi&#xff0c;web3 从业者在尝试 crypto 与区块链技术能为我们的生活、创作、娱乐和文化带来何种新体验&#xff0c;而生成式人工智能的突破性发展则为我们与链上世界的交互、社区内容创作等带来了新的体验&#xff0c;改变互动、交易和价值创造方式。…
阅读更多...
FreeRTOS最全教程（目录）

FreeRTOS最全教程（目录）

文章目录 前言一、为什么要学FreeRTOS二、FreeRTOS开发和裸机开发的区别三、FreeRTOS入门篇四、FreeRTOS深入篇五、自制FreeRTOS六、FreeRTOS项目开发总结 前言 本篇文章将作为FreeRTOS最全教程的目录使用。 一、为什么要学FreeRTOS 1.嵌入式系统开发&#xff1a; FreeRTOS …
阅读更多...
实现日期间的运算——C++

实现日期间的运算——C++

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…
阅读更多...
SpringBoot + MyBatis 在 jar 中可以启动但是 Idea中无法启动的原因

SpringBoot + MyBatis 在 jar 中可以启动但是 Idea中无法启动的原因

现象 在idea中启动始终卡住&#xff0c;查看线程堆栈发现一直在mybatis的处理过程中&#xff0c;细究了一下堆栈发现mybatis有使用远程方式加载类的情况&#xff0c;并且此时cpu会飙升&#xff0c; 在命令行中使用java -jar 的形式可以正常启动&#xff0c;但是在idea中启动始…
阅读更多...
SAP-QM-动态检验规则

SAP-QM-动态检验规则

Dynamic Modification Rule &#xff08;动态修改规则&#xff09; 1、决定样本大小的方式有3种&#xff1a; 手动输入比例大小采样过程 物料主数据质量视图 2、采样过程的创建方式有2种 跟批量大小有关系&#xff1a;百分比/AQL跟批量大小没有关系&#xff1a;固定值 而当…
阅读更多...
Power BI 傻瓜入门 4. Power BI：亮点

Power BI 傻瓜入门 4. Power BI：亮点

本章内容包含&#xff1a; 在Power BI Desktop上学习诀窍摄入数据使用模型试用Power BI服务 就像评估一个由多种成分组成的蛋糕一样&#xff0c;Power BI要求其用户熟悉商业智能&#xff08;BI&#xff09;解决方案中的功能。几乎所有与Power BI交互的用户都是从桌面版开始的…
阅读更多...
操作系统——进程互斥的软件实现算法（王道视频p27、课本ch6）

操作系统——进程互斥的软件实现算法（王道视频p27、课本ch6）

1.总结概览&#xff1a; 2.单标志[turn]法——算法代码&#xff1a; 可能违反“空闲让进” 3.双标志[flag[2]]先检查法——算法代码&#xff1a; 如果不能利用硬件的原语的话&#xff0c;就可能出现违反“忙则等待”的问题: 4.双标志[flag[2]]后检查法——算法代码&#xff1…
阅读更多...
leetcode_2316 统计无向图中无法互相到达点对数

leetcode_2316 统计无向图中无法互相到达点对数

1. 题意 给定一个无向图&#xff0c; 统计无法互相到达的点对数。 统计无法互相到达点对数 2. 题解 其实还是求联通块&#xff0c;求联通块可以使用搜索进行标记。还要求得联通块中元素的大小。 联通块其实也就是不相交集合&#xff0c;也可以用并查集来做。 每求得一个联…
阅读更多...
最新文章

Copyright @ 2022~2023