umi 中使用 iconfont ant-design 自带的 icon 种类太少，遂找替代方案 iconfont。 首先需要创建一个函数组件，使其接受一个名为 name 或者 type 的参数，用来指定当前渲染的 icon 名称。 Iconfont.tsx 1234567891011121314151617import React from 'react';import './index.less';interface Icon 2020-12-21 react umi
momentjs 一键切换为 dayjs 公司 umi 创建的项目中，时间的处理使用的是 momentjs，组件用的 ant-design，而且 ant-design 的日期底层的时间处理也是用的 moment。项目一次打包成功之后发现 moment 占的体积比较大，于是考虑下将 moment 切换为比较小的 dayjs。 .umirc.ts 的默认配置中是支持不将 locale 文件打包进去的，但是需要配置 ignoreMomentLo 2020-12-21 react webpack
TypeScript 工具类型使用总结 12345678interface IMyInfo { name: string age: number address: string money: number}type BasicSelect = 'name' | 'age' keyof 该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。 例如： 123type koT = keyof IMyInf 2020-11-22 TypeScript
Vue 2.X 两个不同的运行版本 Runtime Only12345new Vue({ el: '#app', router, render: h => h(App)}) 说明：vue-loader + webpack，会在构建的时候将*.vue打包为静态资源文件，最终的文件是已经被预编译之后的静态浏览器可以识别的资源，也是不需要编译器的可以直接运行的，即只有运行时。 Runtime + Co 2020-11-08 Vue
两种常见的设置锚点的方法 概述：在潜意识里使用最多的应该就是a标签配合其他标签的id属性去做页面锚点跳转，然而在有prompt并且路由在变化的时候会导致一些问题。因为在设置了prompt有数据的话会做离开页面数据不保存或者结束任务的提示逻辑，但是这个prompt又是基于路由的变化来确定有没有触发，所以在使用传统的方法增加锚点的时候url后会追加哈希值导致触发了url变动，prompt没法简单判断出来目前是因为什么事件触发， 2020-11-06 h5-api scrollIntoView
原生实现浏览器支持的图片懒加载方案 概述：因为内部项目运营工具中有遇到处理大量图片在一瞬间请求的场景，在开发阶段遇到了如果不处理图片，不用懒加载的话，浏览器会在一瞬间造成卡顿，用户体验和效果非常差。 解决方案 未调研的 React 三方懒加载库 img 图片的属性 loading因为项目采用的是 umi+ts，而 img 属性的 loading 并未标准化，还处在实验阶段，但是 Chrome 76+ 已经支持。代码中直接在 jsx 2020-11-05 h5-api IntersectionObserver
gitlab-ci.yml文件的一些总结 基础抽象概念 runner用来执行软件集成脚本的东西，runner 的机器是需要能够通过网络访问 GitLab 服务器 Shared Runner 场景：所有的工程都有可能需要在公司的服务器上进行编译、测试、部署等工作，这个时候注册一个Shared Runner供所有工程使用就很合适 Specific Runner 场景：个人的电脑或者服务器上自动构建我参与的某个工程，这个时候注册一个 Speci 2020-10-24 gitlab-ci
浏览器中下载的一些总结 通过 http 请求返回的 json 数据，如何下载到本地作为调试的 mock 数据？二进制文件等部分涉及浏览器中的下载一般都会涉及到二进制，浏览器中常见的二进制以及特殊的数据相关的用的最多Blob，DataURL，Base64 ，ObjectURL Blob 是浏览器端的类文件对象，存储着二进制的数据，其接受两个参数，第一个参数，array 是一个由 ArrayBuffer , ArrayBuf 2020-10-21 浏览器
日常工作git命令总结 结合vscode会很强大 生成sshkey ssh-keygen -t rsa -C "邮箱" cd ~/.ssh 复制 id_rsa.pub 内容复制到 git 库中 配置信息以及查看 查看配置信息 git config --list 全局配置 git config --global user.name "yourname" git config 2020-09-15 git
同一个项目切换移动端和PC端布局方案 部分响应式布局小结代码在一个工程中如何做 pc 和 mobile 检测分别使用不同的组件以及样式？【一个目前个人解决的方案，但是项目大的话成本可能会高。更好的做法应该是一套代码根据屏幕大小自适应（类似栅栏布局）】 判断是哪个端 App.vue 生命周期中通过 isMobile 方法判断是属于哪个端 为顶级标签设置命名空间（ css 样式用） v-if 切换不同的 router-view ，这里只需 2020-09-14 Vue