UmiJs（v3.x版本）

1,下载umiJs:npm i umi -g

2,新建一个myUmi空文件夹,cd 到myUmi中，使用官方工具创建项目：npm create @umijs/umi-app

3,下载依赖：npm i

4,运行 npm start

生成的文件目录

小问题：npm run build打包后 index.html打开空白，路径报错。

因为打包默认是根路径下，所以需要在配置文件.umirc.ts 添加publicPath:’./’，

.umirc的基本配置：

import { defineConfig } from 'umi';export default defineConfig({nodeModulesTransform: {type: 'none',},history:{type:'hash'},//base参数，路由前缀base:'d/',// publicPath，打包的时候会在静态文件前面加上public的值。publicPath:'./',hash:true,//开启打包文件的hash后缀routes: [{ path: '/', component: '@/pages/home/index' },{ path: '/myPage', component: '@/pages/mypage/index' },],fastRefresh: {},proxy: {//服务器代理'/api': {'target': 'http://192.169.3.12:8080/','changeOrigin': true,'pathRewrite': { '^/api' : '' },},},
});

全局样式：Umi 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。

修改默认模板：Umi可以修改HTML默认模板，如果存在src/pages/document.ejs这个文件，umi就会将其作为默认模板。

例如：

React的零零碎碎：

书写行内样式报错：

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

  //我是写变量控制行内样式 的 结果报错，说什么style的映射的数据类型不对，react期望style映射的数据类型是个对象而不是字符窜。
< li className={style.li} key={index}  style={selectIndex!=index?'':'height:auto'} >
//改成对象后 错误就消失了< li className={style.li} key={index}  style={selectIndex!=index?{}:{height:'auto'}} >

定义变量错误：

TypeError: "selectIndex" is read-only，

//因为我用const定义了变量 但是下面却修改了常量然后就报错了 只需要把声明的关键字const改成let
const [selectIndex,setSelectIndex]=useState(0)let liClickFn=(index:number)=>{setSelectIndex( selectIndex=index)] },

页面刷新空白:umi默认的路由模式是history，和vue一样刷新会空白，需要设置成hash模式，

在配置文件里history:{//路由模式type:'hash'},

我心累我就不应该好高骛远妄想一步登天umi 2.0我都没看过就直接冲umi3.0。。。。。。。。超级多的错误出现浪费时间浪费精力。接下来还是脚踏实地去看下umi2.0吧。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

UmiJs（v3.x版本）相关推荐

RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版本强势发布
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/chinahuyong/article/details/51290832 继上个版本"RDI ...
Quick BI v3.0版本全新起航——2018杭州云栖大会
在9月22日杭州云栖大会云上数据中台专场中,阿里巴巴产品专家陌停跟现场的观众们分享了Quick BI v3.0版本的新体验.新分析和新功能. 作为一个高效数据分析与展现的BI套件,Quick BI通过 ...
JEECG V3.0版本 (工作流在线定义+UI快速开发库+代码生成器) 全新架构技术，漂亮的界面+智能代码生成+智能工作流
简要说明 JEECG V3.0版本推翻原有SSH2架构,采用SpringMVC+Hibernate+Spring jdbc基础架构, 采用面向声明的开发模式,基于泛型方式编写极少代码即可实现复杂的数据 ...
JEECG V3.0 版本（jbpm5 工作流自定义+WEB UI快速开发库+代码生成器） spring mvc +hibernate
简要说明 JEECG V3.0版本推翻了原有SSH2架构,采用SpringMVC+Hibernate+Spring jdbc基础架构, 采用面向声明的开发模式,基于泛型方式编写极少代码即可实现复杂的数 ...
CYQ.Data 轻量数据层之路 V3.0版本发布-Xml绝对杀手(三十二)
前言: 继正式发布V2.0到现在,已30来天了,一直静悄悄的都没发布什么版本中间仅有插播了一下:CYQ.Data 轻量数据层之路 V2.5 抢先体验版本功能说明演示 (二十九) 只因最近花了很多时间 ...
最新Xpay全开源无授权免签约支付系统源码V3.1版本
正文: 最新Xpay全开源无授权免签约支付系统源码V3.1版本,系统有非常详细的安装文档,程序是属于JAVA开发的,其它的就没什么介绍的了,有兴趣的自行去体验吧. 程序: wwuth.lanzouy. ...
基于MQTT协议的WZ指令开发V3.0版本支持onenet
title: 基于MQTT协议的WZ指令开发V3.0版本支持onenet tags: WZ指令 date: 2019-02-18 10:53:00 视频讲解:(V3.0版本)-https://www. ...
度量、流水线能力再升级，博云DevOps产品发布V3.3版本
2020年9月25日,博云BeyondDevOps产品推出V3.3 版本,该版本提供端到端DevOps的最佳实践落地平台,构建从需求到开发.测试.上线的可视化.自动化的研发过程管理和持续反馈度量体系, ...
开源运维平台Spug V3.1 版本发布
开源运维平台Spug 面向中小型企业设计的无 Agent的自动化运维平台,整合了主机管理.主机批量执行.主机在线终端.文件在线上传下载.应用发布.任务计划.配置中心.监控.报警等一系列功能. Spug ...
RDIFramework.NET平台代码生成器V3.2版本全新发布（提供下载-免费使用）
最新RDIFramework.NET代码生成器全新V3.5版本发布-重大升级回顾V3.1版本更新内容如下: 1.增加对Oracle表创建语句的查看. 2.新增对MySql的代码生成支持. 3.全面重 ...

UmiJs（v3.x版本）

UmiJs（v3.x版本）相关推荐

最新文章

热门文章