umi
蓝枫秋千
前人栽树,后人乘凉。既然我乘了前人的树,那么就栽更多的树给后人~共勉!
展开
-
关于umi项目打包之后体积大问题
概述一个项目打包之后发现包非常的大,达到了惊人的8MB,别人打包都是几百K、2,3MB的体积,我的项目有问题!!!找毒瘤查看每一个打包之后的文件,发现了俩毒瘤:umi.xxxxx.js和vendors.xxxxx.async.js它们俩竟然超过了7MB,为什么呢?分析毒瘤运行umi自带的包模块结构分析工具analyze,查看项目每个模块的大小命令yarn analyze或npm run analyzeanalyze介绍请查看umi官网运行之后会看到如下一个界面,很直观:包越大比例越大比原创 2020-09-04 15:21:55 · 11478 阅读 · 2 评论 -
antd select实现省市级联动完整步骤(包含读取json数据)
去这里拷贝一份json数据这个字段结构也是写好了的,符合antd字段要求直接拷贝数组(不要前面的const和options和=号),然后建立一个json文件如果不想通过json读取数据,也可以直接拷贝整个文件内容(包括const options =)部分通过import的方式导入json文件注意:如果使用的是ts这里会报警告Cannot find module 'ech...原创 2020-04-16 20:17:24 · 5065 阅读 · 3 评论 -
antd pro框架用户权限的简单配置和使用
这里只介绍antd pro框架Authorized的最简单的使用高级些的用法参考以下文章Ant Design Pro 鉴权/ 权限管理ant design pro 配置动态菜单、权限对权限的写入一般来说,我们对于权限的写入都是在登录成功之后进行调用所以现在登录页面导入setAuthoried方法调用方法进行写入权限(默认的权限只有两种admin和guest,我这里也只说这两种...原创 2020-04-16 16:21:28 · 4923 阅读 · 1 评论 -
umi修改默认的browser路由为hash路由
browser路由长啥样?localhost:8000/userCenter/indexhash路由长啥样?localhost:8000/#/userCenter/index两者表面区别就是多了一个#这样的区别带来的直接问题就是当处于二级或多级路由状态时,刷新页面,会将当前路由发送到服务器(因为是pathname),而不会(因为是hash段)我会遇到这个问题是因为我做面包屑路由跳转的时...原创 2020-04-15 15:44:41 · 7327 阅读 · 1 评论 -
umi框架使用icon-font
使用icon-font的图标在/config/defaultSetting目录下找到iconfontUrl这里是阿里icon-font的项目图标页面,找到symbol地址在项目中正常使用即可原创 2020-04-15 10:10:40 · 4400 阅读 · 2 评论 -
使用memo,useMemo和useCallback优化react渲染性能
memo问题: 当在一个父组件中调用一个子组件的时候,由于父组件的state发生了改变导致父组件更新,虽然子组件没有发生改变,但是也会进行更新,如下面代码import React, { useState, memo } from 'react'export default function index(): JSX.Element { const [count, setCount...原创 2020-03-12 14:42:16 · 5394 阅读 · 0 评论 -
umi搭建脚手架约定式路由使用技巧
官方文档对于约定式路由的定义理解: 就是说你在pages目录下建立一个文件,路由会自动生成,而不需要你自己配置但是实际上你写了文件之后,手动在浏览器地址栏输入路由没有发生跳转原因: 使用脚手架搭建的项目会在配置文件中对路由进行配置。若.umirc.(ts|js)或 config/config.(ts|js) 文件中对 router 进行了配置,约定式路由将失效、新添的页面不会自动被 um...原创 2020-03-11 14:16:29 · 2364 阅读 · 1 评论 -
umi面包屑和页头配置和使用
在使用umi框架的时候,本来我们的页面是只能写在如图所示位置的内层红框中通过审查元素可得,是由于框架自带的一个样式有margin导致了我们的内容正常情况是无法布局到外面去的(因为一般我们不会改框架自己写好的样式)那么如果我们想要实现像这样的面包屑和页头要怎么办呢umi自己封装了一个组件PageHeaderWrapper,使用起来也非常简单import React from 'reac...原创 2020-02-26 23:32:07 · 7407 阅读 · 5 评论 -
dva中对于mock的简单使用(另附umi中的使用方法和自己手动fetch发送请求方法,还有mock中response和request参数的配置)
在根目录的mock目录下新建一个文件’mockData.js’,写入下面代码module.exports = { 'GET /api/mockData': (request, response) => { console.log(request); response.send({ msg: '登陆成功' }) }}在根目录下的.roa...原创 2020-02-26 16:37:12 · 1949 阅读 · 0 评论 -
ant design pro项目中添加面包屑
导入面包屑组件import { PageHeaderWrapper } from '@ant-design/pro-layout';在return的jsx最外层包裹面包屑组件 <PageHeaderWrapper title="我的测试"> 这是我的测试页面 </PageHeaderWrapper>其中:title参数为面包屑下面的标题在路由...原创 2020-02-14 15:42:20 · 10617 阅读 · 6 评论 -
使用linux系统安装umi提示命令未找到
全局安装nodecnpmcnpm i yarn tyarn -gtyarn -vyarn global add umiumi -v提示umi命令未找到需要将 yarn global bin 路径配置到环境变量中官网上只有mac和windows系统的# mac 系统:$ sudo vi ~/.bash_profile# 在 .bash_profile 中添加下面一行:e...原创 2020-02-07 11:41:29 · 2131 阅读 · 0 评论 -
umi项目创建
安装yarn(推荐使用,(提示权限不够请使用sudo指令))npm install -g yarn# 安装完成后,使用命令查看是否安装成功yarn -v# 使用yarn安装umiyarn global add umi# 安装完成后,使用命令查看是否安装成功umi -vnpm安装umi(提示权限不够请使用sudo指令)npm install -g umi使用umi快速搭...原创 2020-01-16 14:56:35 · 2920 阅读 · 0 评论 -
使用umi中碰到的一些小问题/技巧
页面路由跳转传参// 传递参数<Link to={{pathname:`/breakpromise-manager/${record.id}/detail`,state:{typeId:record.orgType}}}>{text}</Link>// 页面接收参数let orgType = this.props.location.state.typeId;使用...原创 2020-01-09 22:35:56 · 8676 阅读 · 1 评论