umi学习（umi4）_官方认证新生代农民工_平安喜乐的博客-CSDN博客
umi学习（umi4）
官方认证新生代农民工_平安喜乐
于 2023-03-03 17:16:13 发布
635
收藏
分类专栏：
笔记
react16/18
文章标签：
前端
react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60968779/article/details/129294765
版权
笔记
同时被 2 个专栏收录
101 篇文章
2 订阅
订阅专栏
react16/18
6 篇文章
0 订阅
订阅专栏
umi 官方文档
官方建议使用 pnpm
node版本在 14 以上
创建项目：
根据 包管理工具不同 ，官方推荐
这里使用 pnpm：
1. pnpm dlx create-umi@latest
2. 选择模板 （这里使用 Simple App） 想对module处理需要使用 Ant Design Pro版本
3. 选择包管理工具（这里使用pnpm）
4. 选择源（这里使用taobao）
5.启动项目 pnpm dev
路由：
约定式路由：
在 src/layouts/index.jsx 入口文件(相当于vue 的App.vue) 使用 Link 和 Outlet 指定再 src/pages/xxx.jsx 在pages目录下 写对应的地址的同名组件即可跳转，含 404 不需要在config/config.js 或者 umirc.ts 中写 routes 路由表再 src/.umi/core/route.tsx 中可以查看自动生成的路由表
src/layouts/index.jsx:
import { Link, Outlet } from 'umi';
import styles from './index.less';
export default function Layout() {
return (
<div className={styles.navs}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/docs">Docs</Link>
</li>
<li>
<Link to="/aaa">aaa</Link>
</li>
<li>
<Link to="/bbb">bbb</Link>
</li>
<li>
<a href="https://github.com/umijs/umi">Github</a>
</li>
</ul>
<Outlet />
</div>
);
src/pages:
config/config.ts:
import { defineConfig } from "umi";
export default defineConfig({
// routes: [
// // { path: "/", component: "index" },
// // { path: "/docs", component: "docs" },
// ],
npmClient: 'pnpm',
});
配置式路由：
在配置文件中通过 routes 进行配置，格式为路由信息的数组。
例如：
export default {
routes: [
{ path: '/', component: 'index' },
{ path: '/user', component: 'user' },
],
参数：配置路由
path 地址component pages目录下的地址routes 子路由redirect 重定向wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
跳转：
withRouter高阶组件可以拿到 histroy location match 等
import { useNavigate, Navigate, history } from "umi";
const OrderPage = () => {
v6版本:
navigate('/xxx')
navigate(-1)
navigate(1)
navigate('/xxx',{replace:true,state:{...}})
navigate({
pathname:'/xxx',
search:'xxx=xxx&xxx=xxx'
})
---
页面中只要遇到<Navigate/>组件，就可以实现跳转!!
const navigate = useNavigate();
const handle = () => {
navigate({
pathname: '/personal/profile',
search: 'lx=0&name=zhufeng'
});
// history:go/goBack/goFoward/push/replace
history.push({
pathname: '/personal/profile',
// search: 'lx=0&name=zhufeng',
在我们开启了historyWithQuery配置项之后，就可以使用query对象进行传递了「但是不适合于navigate这种方式」
query: {
lx: 0,
name: 'zhufeng'
});
v6的隐式传参：即便目标组件刷新，传递的信息还在「纯正的v5版本中，目标组件一刷新，则隐式传递的信息消失了」
navigate('/personal/profile', {
state: {
lx: 0,
name: 'zhufeng'
});
我们获取的history对象和纯正v5中的history对象是有区别的，主要在于隐式传参这个方面！！ -> 向v6中的navigate看齐的！！
history.push('/personal/profile', {
lx: 0,
name: 'zhufeng'
});
};
return (
<div>
我的订单
<button onClick={handle}>按钮</button>
</div>
);
};
export default OrderPage;
三大脚手架的区别
React工程化开发：
1. create-react-app
+ 脚手架的配置
$ yarn eject 暴露配置项
直接在源码中或者package.json中进行修改
+ 路由管理
想用哪个版本就用哪个版本
但是约定式路由的模式、统一处理、权限校验等，都需要自己去实现！！
+ 数据管理
自己基于redux/react-redux/redux-saga 或者 mobx实现状态管理
操作起来很复杂
2. dva-cli
+ 脚手架的配置
基于roadhog进行webpack的配置
在.webpackrc.js文件中，基于roadhog指定的方式去修改
+ 路由管理
用的是v4版本「比较老」，react用的也是16
默认就是约定式路由，但是统一处理及权限校验等，还是需要自己的去封装！！
+ 数据管理
dva的灵魂所在就是对redux/redux-saga的封装
创建并且注册Model层，操作起来非常的简单、方便！！
3. create-umi@latest 或者 @ant-design/pro-cli「用的是@umi/max」
+ 脚手架的配置
在config/config.ts中（或者.umirc.ts中），按照umi提供的配置方式去修改配置项
有启动和打包时候的配置：webpack配置修改、路由、页面模板的配置...
也存在运行时的配置「app.ts」：配置dva、和路由的检测及动态管理、以及Layout页面的布局调整！！
+ 路由管理
umi3是v5，umi4是v6（而且在v6的基础上，封账了和v5中类似的操作语法）
路由全套机制，基本上都已经处理好了，我们只需要按照相关的说明去更改即可！！
+ 数据管理
继承了dva的Model机制！！
4. vite
前三个脚手架，不论咋变，核心都是webpack处理！！
vite是基于rollup实现打包的「和webpack不是同一个东西」！！
特点：比webpack快很多很多！！尤其是开发环境下！！
脚手架的配置需要我们考虑的事情：
+ 基础配置：入口、出口相关的操作
+ less等预编译语言的处理
+ 浏览器兼容处理
+ ES6语法、CSS3语法
+ ES6内置API
+ 响应式适配
+ 修改babel-plugin：babel-plugin-styled-components-px2rem
+ 修改postcss-plugin：postcss-px2rem
+ 跨域代理
+ ...
Ant Design Pro
开始使用 - Ant Design Pro
config.ts的配置：
// https://umijs.org/config/
import { defineConfig } from '@umijs/max';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV = 'dev', NODE_ENV } = process.env;
export default defineConfig({
/**
* @name 常规配置
*/
title: "CMS内容管理系统",
targets: {
ie: 11
},
hash: true,
devtool: false,
inlineLimit: 10000,
jsMinifier: 'terser',
publicPath: NODE_ENV === 'production' ? './' : '/',
/**
* @name 路由的配置
* @doc https://umijs.org/docs/guides/routes
*/
historyWithQuery: {},
history: {
type: 'hash'
},
routes,
/**
* @name 主题的配置
* @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
* @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
*/
theme: {
'root-entry-name': 'variable'
},
/**
* @name 代理配置
* @see 要注意以下 代理只能在本地开发时使用，build之后就无法使用了
* @doc 代理介绍 https://umijs.org/docs/guides/proxy
* @doc 代理配置 https://umijs.org/docs/api/config#proxy
*/
proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
/**
* @name 快速热更新配置
* @description 一个不错的热更新组件，更新时可以保留state
*/
fastRefresh: true,
//============== 以下都是max的插件配置 ===============
/**
* @name 数据流插件
* @@doc https://umijs.org/docs/max/data-flow
*/
model: {},
/**
* 一个全局的初始数据流，可以用它在插件之间共享数据
* @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
* @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
*/
initialState: {},
/**
* @name layout 插件
* @doc https://umijs.org/docs/max/layout-menu
*/
layout: {
locale: false,
...defaultSettings
},
/**
* @name antd 插件
* @description 内置了 babel import 插件
* @doc https://umijs.org/docs/max/antd#antd
*/
antd: {},
/**
* @name 网络请求配置
* @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
* @doc https://umijs.org/docs/max/request
*/
request: {},
/**
* @name 权限插件
* @description 基于 initialState 的权限插件，必须先打开 initialState
* @doc https://umijs.org/docs/max/access
*/
access: {}
});
关注博主即可阅读全文
官方认证新生代农民工_平安喜乐
关注
关注
点赞
收藏
打赏
知道了
评论
umi学习（umi4）
umi学习
复制链接
扫一扫
专栏目录
react-umi-4.纯前端架构总结篇
echo_Ae的博客
12-08
1384
我们全部基于umi框架实现了
Layou快速布局
ProComponents组件介绍以及使用
登录模块
首页模块
菜单模块
管理员模块
角色模块
动态路由
Layout快速布局
.umirc.ts
layout: {
name: 'An中台系统',
theme: 'pro',
locale: true,
},
routes: [
{ path: '/login', layout: false, component: '@/pages/login'
umi v4加密狗驱动
11-15
加密狗一般不需要驱动。有些时候没有驱动也不行。如果碰到，希望这个驱动能有帮助。
参与评论
您还未登录，请先
登录
后发表或查看评论
umi v4加密狗驱动 官方版_支持64位系统
07-14
umi v4加密狗驱动是微狗最新驱动程序，当遇到部分umi v4加密狗无法使用的时候可以尝试一下此驱动，本驱动支持以下操作系统：Windows9X/ME/NT/2K/XP/WS2003/Vista/XP64/WS2003x64/Vista64，需要的拿走吧。驱动介绍微狗UMI/UMC/PMH/PMI驱动安装程序是安装在 Wi,欢迎下载体验
umi基础框架（React+umi+Ts）
08-05
umi、dva、React
关于react、umi的跨域问题
Akukudeteng的博客
09-24
1324
目录react框架的两种前端跨域方式：1.我这边用的是**基于react的umi框架**步骤1：找到package.json文件，增加proxy这部分内容步骤2：接口部分——在调用的api前省略http：XXXXXX 添加上'api1'(之所以写api1是因为用项目里用/api的接口太多，为了区分和别的接口的，所以用api1)2. react框架步骤1：在src下创建setupProxy.js文件，并添加内容步骤2：如上面方式1的步骤2
出现上面的问题：就是跨域问题了
针对跨域问题有两种解决方法：
后端
Umi配置全局Layout无法加载子组件，this.props是空的
m0_52640724的博客
07-12
911
umi配置layout的问题
Umi4 从零开始实现动态路由、动态菜单
绿胡子大叔的博客
10-04
3609
近期在写 Umi4 的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。
Umi 4 快速搭建项目
qq_38629292的博客
08-02
3573
Umi4已于今年6月份发布，同时支持 Vite 和 Webpack 两种构建方式，对诟病已久的mufs做了优化，另外还支持vue。那我们就来上手搭建下吧。
umi学习总结
shuoxi666的博客
12-15
508
umi学习
umi4 多环境配置改变
最新发布
星宇大前端
01-07
905
umi3 多环境我们可以根据脚本配置环境变量，然后配置不同的umirc 或者config 文件，从而达到配置多环境的效果。但是umi4出来之后，umi3 这种方法有了问题。
umiLearn:umi学习
04-03
umi项目
入门
安装依赖项
$ yarn
启动开发服务器，
$ yarn start
umi3+dva编程学习资源，自用
06-21
umi3+dva编程学习资源，自用
react umi当中layout布局切换：登录页、登录之后的布局
热门推荐
体验技术
04-23
1万+
1.切换layout布局
2.记录从哪个页面跳转到登录页面的，登录之后返回（不使用localStorage）
3.Cookie等信息记录登录状态（登录失效，跳到登录页面）
核心观点是：将是否登录的状态划分为2种布局
布局1：非登录状态，直接进入登录页面
布局2：已登录状态，拥有sider、header...
umi.js 或 antd-design-pro 添加 postcss-px-to-viewport 插件包
开发的那些事儿
01-15
1235
安装postcss-px-to-viewportNpm包
# 使用npm安装
npm install postcss-px-to-viewport
# 或使用yarn安装
yarn add postcss-px-to-viewport
添加配置信息
打开umi.js框架下的config/config.js文件，写入以下内容
// 先引入postcss-px-to-viewport模块对象
import px2vw from 'postcss-px-to-viewport';
// 在..
服务器网络请求返回状态码集合
qq_41241504的博客
11-25
284
在开发过程中报错是最令人头疼的，接下来我们就来谈谈那些状态码都是什么
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
...
umi插件useRequest基本使用
weixin_62192841的博客
10-25
2310
umi默认开启了插件@umijs/plugin-request，内置了useRequest这个超级好用的hook，本文介绍了优点及基本使用方法，包含了大部分对于useRequest的使用场景，来找找有没有能解决你的问题的地方吧！
umi-request 网络请求之路
qq_57756904的博客
10-30
1万+
umi-request 网络请求之路
背景
在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题：
请求库各式各样，没有统一。每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。
各应用接口设计不一致、混乱。前后端同学每次需重新设计接口格式，前端同学在切换应用时需重新了解接口格式才能做业务开发。
接口文档维护各式各样。有的在语雀（云端知识库）上，有的在 RAP （开源接口管理工具）上，有的靠阅读源码才能知道，无论是维护、mock 数据还是沟通都很浪费.....
Umi4 集成阿里低代码框架lowcode-engine
wangqiaojie的博客
08-04
3193
最近准备研究下阿里低代码框架lowcode-engine, 官方Demo是提供好的脚手架，由于我们的框架使用的是umi，官方文档提供了一些教程，在此记录下在umi4集成lowcode-engine.
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
官方认证新生代农民工_平安喜乐
CSDN认证博客专家
CSDN认证企业博客
码龄2年
暂无认证
104
原创
1万+
周排名
2万+
总排名
3万+
访问
等级
1031
积分
1036
粉丝
13
获赞
评论
51
收藏
私信
关注
热门文章
AntV G2
3568
Vue3组件化开发（二）
2640
webscoket学习
1881
uniapp学习
1324
Echarts学习笔记5（树形图、数据排序、主题、地图、图表自适应大小、加载动画效果、动画配置、echarts事件）
1277
分类专栏
react16/18
6篇
笔记
101篇
typescript
1篇
react
13篇
JS高级
20篇
框架
5篇
coderwhy系统课
Echarts（5.0）
8篇
git
1篇
小程序
2篇
JS基础
23篇
Vue3
14篇
node.js
1篇
Vue语法基础
1篇
小兔仙Vue3
2篇
正则表达式
1篇
less
1篇
最新评论
React（coderwhy）- 03(高阶组件+动画)
IT界中的一枝梅:
能发一份吗,感谢
React（coderwhy）- 03(高阶组件+动画)
IT界中的一枝梅:
老哥有没有资料
React（coderwhy）- 09(项目实战 - 1)
智慧地球（AI·Earth）:
博主文章质量很高，，凤⭐尘必须给三连支持了。我正在参加CSDN创作者的申请，欢迎大佬给个关注三连哇！ 这是我的博客链接：https://blog.csdn.net/qq_36396104?type=blog
欢迎大佬加入我创办的互粉社区，共同进步！
React（coderwhy）- 02(函数组件)
1 + 1=王:
已支持，我正在参加年度博客之星评选，请大家帮我投票打分。 https://bbs.csdn.net/topics/611386885?spm=1001.2014.3001.6953
AntV G2
官方认证新生代农民工_平安喜乐:
G2 我们公司现在不用了
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
dva（ 轻量级的应用框架 ）
redux-saga
Iterator和Genertator
2023年15篇
2022年89篇
目录
目录
分类专栏
react16/18
6篇
笔记
101篇
typescript
1篇
react
13篇
JS高级
20篇
框架
5篇
coderwhy系统课
Echarts（5.0）
8篇
git
1篇
小程序
2篇
JS基础
23篇
Vue3
14篇
node.js
1篇
Vue语法基础
1篇
小兔仙Vue3
2篇
正则表达式
1篇
less
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
官方认证新生代农民工_平安喜乐
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值