umi.js

news/2024/12/2 20:02:52/

umi使用步骤

在这里插入图片描述

相关配置

在.umirc.ts文件中配置hash为true时,打包完dist目录下的js和css文件会生成随机hash值
在这里插入图片描述
配置base则会改变首页文件的访问路径,配置的时候还要一起配置一个publicPath,一般和base相同,添加这个的目的就是在dist生成的index里面引入的css和js也会加入这个前缀不然引入不到,它们默认都是’/’
在这里插入图片描述
配置outputPath可以更改build完的文件名,默认是dist,这里改成’abc’
配置title可以更改网页标题,单独组建想定义的话就写在routes里面
在这里插入图片描述
默认的模板在包里面的@umijs的core里lib里的Html里的document.ejs,但是要修改模板文件的话如下图,配置这个文件主要是有些第三方的组件可能在npm里面没有,只能在页面中用script和link标签引入
在这里插入图片描述
配置路由组件他是会默认匹配的,只要在src下创建组件同名目录,然后在底下创建一个index.js就可以啦,重定向就是输入这个路径它会自动马上跳转到指定的路径,子路由就是在里面再套一个routes,子路由的用处就是你把它这个组件写在其他页面的某个地方,只有在访问到你这个子路由的路径时这个组件才会显现出来,具体可以看官方文档,还可以配置title,redirct啥的

 routes: [{ path: '/', component: '@/pages/index','title':'首页',routes:[{ path: '/user', component: '@/pages/user','title':'用户列表'}] },],

组件里面就是用props.children属性放在想要的位置,去往固定的路由地址就会显示相应的子组件
Link和react引用的方式相同,但是是引用自umi
NavLink就是导航式链接,到达对应路由的时候,导航的样式会发生相应设置的变化(每个NavLink都有一个active类名,可以在上面设置样式)

Mock
在.umirc.ts里面配置mock:false会默认关闭mock相关配置
mock文件夹下面是mock的相关文件,这里面写的东西就是等下axios请求来的东西
mock里面不需要走的文件
在这里插入图片描述
mock的文件大概这么写
在这里插入图片描述

umi中使用dva

npm install -D dva

在这里插入图片描述


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

相关文章

CubeMX的简介

在Cube工具还没出来之前,在ST的MCU开发都是用标准固件库,标准库自推出以来受到ST的使用者的推崇,现在很多公司也都在使用。但是ST官方在2013年后就没有更新版本,ST官方也全力推HAL(Hardware Abstraction Layer&#xf…

Ymodem

目录 一、数据帧格式 1.1 起始帧 1.2 数据帧 1.3 结束帧 二、文件传输流程 2.1 传输符号表 三、CRC校验源码 一、数据帧格式 1.1 起始帧 格式1(128byte):SOH 00 FF filename[ ] filezise[ ] NUL[ ] CRCH CRCL 格式2(1k …

memmove

memmove void *memmove(void *dst, const void *src, size_t len);从src中复制len个字符到dst中&#xff0c;能保证复制的数据的准确性&#xff0c;不会影响dst中超出len的部分 #include <stdio.h> #include <ctype.h> #include <memory.h> #include <s…

tmux。。

Ctrlb 激活控制台&#xff1b;此时以下按键生效 面板操作 ”将当前面板平分为上下两块%将当前面板平分为左右两块x关闭当前面板!将当前面板置于新窗口&#xff1b;即新建一个窗口&#xff0c;其中仅包含当前面板Ctrl方向键以1个单元格为单位移动边缘以调整当前面板大小Alt方向…

UMI简介

关于UMI的一些东西&#xff0c;概念&#xff0c;位置&#xff0c;如何处理 UMI是什么 UMI全称&#xff1a;Unique Molecular Identifiers。 又称分子条形码技术&#xff0c;是对原始样本基因组打断后的每一个片段都加上一段特有的标签序列&#xff0c;用于区分同一样本中成千上…

cimoc 最新版_Cimoc官方版

Cimoc怎么更新&#xff1f;Cimoc官方最新版是一款非常不错的漫画阅读软件&#xff0c;Cimoc官方版里具有海量的优质小说资源&#xff0c;用户可一键搜索查询自己喜爱的漫画阅读&#xff0c;同时支持离线下载阅读&#xff0c;线上阅读等功能&#xff0c;让你随时免费阅读漫画&am…

为了不被裁之NVMe-MI oob

为了不被裁之NVMe-MI oob Nvme-MIoob(out-of-band)MI命令执行过程NVMe MI报文Message Header&#xff1a;Message Data&#xff1a;Message Integrity Check&#xff1a; NVMe MI报文分类1. Response Message格式2. Control Primitive格式3. NVMe MI Command格式4. NVMe Admin …

第七届全球超宽带高峰论坛在迪拜开幕;爱立信公布2021年第三季度财报 | 全球TMT...

海外市场 爱立信公布2021年第三季度财报。集团有机销售额同比下降1%&#xff0c;报告销售额为563亿瑞典克朗&#xff08;2020年同期为575亿瑞典克朗&#xff09;。网络业务有机销售额同比增长稳定。报告的息税前利润率为23.7%&#xff08;2020年同期为22.0%&#xff09;。报告的…