创建项目(React+umi+typeScript)
项目框架搭建的方式
- react脚手架
- Ant-design官网
- 一、安装方式npm
- 二、安装方式yarn
- 三、安装方式umi dev
react脚手架
命令行:
npx create-react-app myReactName
项目目录结构:

浏览器运行,端口号3000:

Ant-design官网
一、安装方式npm
前提:react ES2015,nodejs v8+
命令行:
npx @umijs/create-umi-app
项目目录结构:

浏览器运行,端口号3000:yarn start失败
二、安装方式yarn
前提:yarn全局安装配置
命令行:
推荐使用yarn安装
yarn create @umijs/umi-app
项目目录结构:

新建路由以及子路由的配置:
前提:umi官网路由
01定义:
在 Umi 应用是单页应用,页面地址的跳转都是在浏览器端完成的,不会重新请求服务端获取 html,html 只在应用初始化时加载一次。所有页面由不同的组件构成,页面的切换其实就是不同组件的切换,你只需要在配置中把不同的路由路径和对应的组件关联上。
路由类型配置:
02分类:
1.开启 hash 模式,让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
2.设置路由 history 类型。
03通过命令创建一个/peoducts路由
npx umi g page products --typescript
04在.umirc.ts中配置路由
子路由配置:
步骤:
01配置子路由,通常在需要为多个路径增加 layout 组件时使用。
02然后在 src/layouts/index 中通过 <Outlet/> 渲染子路由,但是此处遇见了问题。
问题描述:
模块“"umi"”没有导出的成员“Outlet”。
解决思路:
1.主要是 ts 对 umi 的识别问题;
2.查看下 tsconfig.json 文件的配置
03最后,访问 /list 和 /admin 就会带上 src/layouts/index 这个 layout 组
代码示意图:

浏览器运行,端口号8000:yarn start

三、安装方式umi dev
前提:全局安装umi
安装umi:
npm install umi -g
查看umi是否安装成功:
umi -v
命令行:
创建页面:
umi g page index
umi g page users
项目目录结构:

浏览器运行,端口号3000:
umi dev
01这一步会直接打开页面,并且pages文件夹下会多一个.umi目录
02.umi目录是一个临时目录
1.可以再这里做一些验证,不要直接修改代码
2.umi重启或者pages下的文件修改 会重新生成
相关文章:
创建项目(React+umi+typeScript)
项目框架搭建的方式react脚手架Ant-design官网一、安装方式npm二、安装方式yarn三、安装方式umi devreact脚手架 命令行: npx create-react-app myReactName项目目录结构: 浏览器运行,端口号3000: Ant-design官网 一、安装方…...
FISCO BCOS(二十七)———java操作WeBase
一、搭建fiscobcos环境 1.1、安装jdk1.8 https://blog.csdn.net/weixin_46457946/article/details/1232435131.2、安装mysql https://blog.csdn.net/weixin_46457946/article/details/1232447361.3、安装python https://blog.csdn.net/weixin_46457946/article/details/123…...
失眠时还在吃它?有风险,你了解过吗
失眠,是当代人的通病。所以解决失眠也成了刚需,市面上开始出现各种助眠产品。有商业机构调查发现,62%的90后消费者曾买过助眠产品,其中人气选手就是褪黑素。褪黑素本身就是人体天然存在的,与睡眠有关的物质,…...
星戈瑞收藏Sulfo-CY7 amine/NHS ester/maleimide小鼠活体成像染料标记反应
关于小鼠活体成像,就一定要提到CY活性染料标记反应: 用不同的活性基团的Cyanine菁染料和相应的活性基团的生物分子或小分子药物发生反应,链接到一起。 根据需要标记的抗原、抗体、酶、多肽等分子所带的可标记基团的种类(氨基、醛…...
守护最后一道防线:Coremail邮件安全网关推出邮件召回功能
根据Coremail邮件安全大数据中心2022年Q4季报显示,2021年CAC识别钓鱼邮件1.81亿,2022年上升至2.25亿,增幅高达24.1%。 这表明2022年平均每天有61万7088封钓鱼邮件被接收及发出,企业用户面临潜在经济损失不可估量。 尤其是活跃至今…...
Python实战之小说下载神器(二)整本小说下载:看小说不用这个程序,我实在替你感到可惜*(小说爱好者必备)
前言 这次的是一个系列内容给大家讲解一下何一步一步实现一个完整的实战项目案例系列之小说下载神器(二)(GUI界面化程序) 单章小说下载保存数据——整本小说下载 你有看小说“中毒”的经历嘛?小编多多少少还是爱看小说…...
ChatGPT三个关键技术
情景学习(In-context learning) 对于一些LLM没有见过的新任务,只需要设计一些任务的语言描述,并给出几个任务实例,作为模型的输入,即可让模型从给定的情景中学习新任务并给出满意的回答结果。这种训练方式能…...
考试系统 (springboot+vue前后端分离)
系统图片 下载链接 地址: http://www.gxcode.top/code 介绍 一款多角色在线培训考试系统,系统集成了用户管理、角色管理、部门管理、题库管理、试题管理、试题导入导出、考试管理、在线考试、错题训练等功能,考试流程完善。 技术栈 Spr…...
ChatGPT告诉你:项目管理能干到60岁吗?
早上好,我是老原。这段时间最火的莫过于ChatGPT,从文章创作到论文写作,甚至编程序,简直厉害的不要不要的。本以为过几天热度就自然消退了,结果是愈演愈烈,热度未减……大家也从一开始得玩乐心态,…...
Python自动化测试框架【Allure-pytest功能特性介绍】
Python自动化测试框架【Allure-pytest功能特性介绍】 目录:导读 前言 生成报告 测试代码 目录结构 Allure特性 Environment Categories Fixtures and Finalizers allure.attach 总结 写在最后 前言 Allure框架是一个灵活的轻量级多语言测试报告工具&am…...
ToB 产品拆解—Temu 商家管理后台
Temu 是拼多多旗下的跨境电商平台,平台产品于9月1日上线,9月1日到9月15日为测试期,之后全量全品类放开售卖。短短几个月的时间,Temu 在 App Store 冲上了购物类榜首,引起了国内的广泛关注。本文将以 B 端产品经理的角度…...
Android Studio的笔记--socket通信
Android socket通信Socket协议android socket 代码清单文件开启服务服务端:TCPServerService客户端:TCPClientServicelogSocket Socket 作为一种通用的技术规范,首次是由 Berkeley 大学在 1983 为 4.2BSD Unix 提供的,后来逐渐演化…...
@Async 注解
异步执行 异步调用就是不用等待结果的返回就执行后面的逻辑;同步调用则需要等待结果再执行后面的逻辑。 通常我们使用异步操作时都会创建一个线程执行一段逻辑,然后把这个线程丢到线程池中去执行,代码如下所示。 ExecutorService executor…...
Redis:缓存穿透、缓存雪崩和缓存击穿(未完待续)
Redis的缓存穿透、缓存雪崩和缓存击穿一. 缓存穿透1.1 概念1.2 造成的问题1.3 解决方案1.4 案例:查询商铺信息(缓存穿透的实现)二. 缓存雪崩2.1 概念2.2 解决方案三. 缓存击穿(热点key)3.1 概念3.2 解决方案3.3 案例&a…...
HIVE 基础(四)
目录 分桶(Bucket) 设定属性 定义分桶 案例 建表语句 表数据 上传到数据 创建分桶语句 加载数据 分桶抽样(Sampling) 随机抽样---整行数据 随机抽样---指定列 随机抽样---百分比 随机抽样---抽取行数 Hive视图&#…...
整型在内存中的存储(详细剖析大小端)——“C”
各位CSDN的uu们你们好呀,今天小雅兰的内容是整型在内存中的存储噢,现在,就让我们进入整型在内存中的存储的世界吧 数据类型详细介绍 整型在内存中的存储:原码、反码、补码 大小端字节序介绍及判断 数据类型介绍 前面我们已经学…...
PS_高低频和中性灰——双曲线
高低频 高低频磨皮:把皮肤分成两个图层,一层是纹理层也就是皮肤的毛孔。 一层是皮肤光滑层没有皮肤细节。 高频”图层为细节层,我们用图章工具修高频 “低频”图层为颜色层,我们用混合画笔修低频 原理:修颜色亮度光影…...
Vim 命令速查表
Vim 命令速查表 简介:Vim 命令速查表,注释化 vimrc 配置文件,经典 Vim 键盘图,实用 Vim 书籍,Markdown 格式,目录化检索,系统化学习,快速熟悉使用! Vim 官网 | Vim | Vim…...
Java重要基本概念理解
熟悉JVM反射机制。 (1)反射的定义 Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对象方法的功能称为Ja…...
逆向工具之 unidbg 执行 so
1、unidbg 入门 unidbg 是一款基于 unicorn 和 dynarmic 的逆向工具, 可以直接调用 Android 和 IOS 的 so 文件,无论是黑盒调用 so 层算法,还是白盒 trace 输出 so 层寄存器值变化都是一把利器~ 尤其是动态 trace 方面堪比 ida tr…...
Java AI开发避坑!
文章目录一、当"龙虾"突然发狂二、解剖这场"史诗级翻车"第一刀:插件生态大迁徙第二刀:API 接口一锅端第三刀:安全沙箱锁死第四刀:目录结构洗牌三、Java 开发者的至暗时刻WebSocket 连接闪断MCP 适配器失效技能…...
VS Code终端切换全攻略:从PowerShell到CMD的保姆级教程(含常见问题解决)
VS Code终端切换全攻略:从PowerShell到CMD的保姆级教程(含常见问题解决) 在开发者的日常工作中,终端是不可或缺的工具。VS Code作为最受欢迎的代码编辑器之一,其内置终端功能强大且高度可定制。然而,许多开…...
背包问题Ⅱ与二分问题
今天我对背包问题有了更深的理解,我一定要写下来,巩固自己的思路并且,遇到新的难题二分,不管了,干就完了!!!完全背包以今天写的代码展开详细描述与解释,并附上题目#define N 1001 in…...
python-flask-djangol框架的婚恋相亲交友网站
目录技术选型与框架对比核心功能模块设计数据库模型示例(Django ORM)安全防护措施部署方案开发路线图项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作技术选型与框架对比 Flask:轻量级框架&a…...
科研加速器:GLM-4.7-Flash驱动OpenClaw自动整理文献综述
科研加速器:GLM-4.7-Flash驱动OpenClaw自动整理文献综述 1. 为什么需要自动化文献整理 作为每天需要阅读十几篇论文的科研工作者,我发现自己至少有30%的时间花在了机械性劳动上——下载PDF、重命名文件、提取关键结论、整理参考文献格式。这些工作虽然…...
MATLAB实战:用BEMD算法分解图像并提取特征(附完整代码)
MATLAB实战:二维经验模态分解(BEMD)在图像特征提取中的创新应用 当我们需要从一张X光片中识别微小病灶,或是从卫星图像中提取城市道路网络时,传统图像处理方法往往力不从心。二维经验模态分解(BEMD)就像给图像做"CT扫描"࿰…...
如何3步实现ComfyUI-Manager配置加密?揭秘敏感数据保护全方案
如何3步实现ComfyUI-Manager配置加密?揭秘敏感数据保护全方案 【免费下载链接】ComfyUI-Manager 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager 在使用ComfyUI-Manager管理自定义节点和模型时,配置文件中往往包含API密钥、数据库…...
Qt5新手必看:3分钟搞定你的第一个控制台程序(附完整代码)
Qt5入门实战:从零构建控制台应用的完整指南 引言:为什么选择Qt5作为开发起点? 对于刚接触C图形界面开发的程序员来说,Qt框架提供了一个绝佳的起点。它不仅拥有跨平台特性,还具备完善的工具链和丰富的模块库。控制台程序…...
PostgreSQL 模式级权限迁移:一键批量修改所有表与对象的所有者
1. 为什么需要批量修改PostgreSQL对象所有者? 在实际的数据库运维工作中,经常会遇到需要批量修改数据库对象所有者的情况。我遇到过不少这样的场景:公司部门重组后,原先由开发团队A负责的项目转交给团队B维护;或者某个…...
4个关键步骤解决Calibre中文路径乱码难题
4个关键步骤解决Calibre中文路径乱码难题 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文(中文)命名 项目地址: https://gitcode.com/gh_m…...
