lldlly/lldlly.github.io

生活不止眼前的枸杞，还有霸王防脱发和保温杯。

lldlly.github.io's Issues

微前端项目总结 | 上野

https://lldlly.github.io/2022/01/18/qiankun/#%E6%80%BB%E7%BB%93

前言又来记笔记了… qiankun 官网地址：https://qiankun.umijs.org/zh/guide 踩过的坑大部分问题，官网上都是有解决方案，乾坤常用问题解决方案地址： https://qiankun.umijs.org/zh/faq 主要记录一下部署的时候遇到的问题； 主应用和子应用部署在不同服务器的情况，需要主应用配置代理，或者子应用的 ningx 配置设置一下 add_he

npm发包小记 | 上野

https://lldlly.github.io/2021/11/19/npm/#%E5%9D%91%E5%9C%A8%E8%BF%99%E9%87%8C

前言记录一次犯蠢经历😅，主要是npm私服发包和npm官网发包有一点小区别。 npm官网包写好后，先登录，登录之后直接publish就ok了。注意： 确定在执行登录命令的时候处于npm源下，不能是淘宝源等其他源，否则会401报错； 包发布24小时内可以使用unpublish撤销。 npm文档传送门 123456789101112131415161718// 登录 会提示输入账号，密码，邮箱np

create-react-app 创建项目更改webpack配置 | 上野

https://lldlly.github.io/2020/07/07/react/#4-%E9%85%8D%E7%BD%AEconfig-overrides-js

前言使用create-react-app创建的项目webpack配置文件是隐藏起来的，如果想要把配置暴露出来更改，需要运行 npm run eject 命令。不过这种方法有两个缺点： npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏； 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查。 注意：还有craco也可做c

vue3.0 路由切换动画 | 上野

https://lldlly.github.io/2021/03/05/vue-transition/#app-vue

router 先要在router，meta里给页面编号，通过监听route判断index的大小来确定是进入还是离开； 123456789101112const routes = [ { path: '/', redirect: '/home' }, { path: '/home', com

简易版react-redux | 上野

https://lldlly.github.io/2021/10/26/react-redux2/#myReactRedux-%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81

前言学习 react-redux 源码并自己实现其主要功能；学习使我快乐~ 敲代码使我快乐~ 手写一个简单的 react-reduxreact-redux 库将 react 和 redux 结合起来，使 react 项目中可以更加方便的使用 redux~ react-redux 主要 API 有: Provider、connect、bindActionCreators、useSelector、us

实现redux-thunk、redux-promise、redux-logger | 上野

https://lldlly.github.io/2021/07/13/redux/#redux-logger

前言 众所周知，redux只单纯的提供数据流的管理，action也只接受plain object类型，那么如果我们需要在action中写异步就需要借助其他中间件; 学习的时候简陋的实现了一下redux-thunk、redux-promise、redux-logger， 特此记录（记笔记行为，仅供学习参考）。 redux-thunk1234567891011121314/** * 实现redux-t

Mobx学习记录 | 上野

https://lldlly.github.io/2019/11/26/Mobx/#2-mobx%E5%9C%A8store%E5%92%8C%E7%BB%84%E4%BB%B6%E9%87%8C%E7%9A%84%E5%BA%94%E7%94%A8

Mobx工作记录之前由于项目比较急，需要在短时间内学习并上手mobx，虽然已经用react+mobx开发了好几个项目，一直都没时间总结一下。特此梳理一下，让知识沉淀沉淀~Mobx官方文档Mobx官方中文文档 Mobx的核心概念Mobx的核心原理是通过action触发state的变化，进而触发state的衍生对象（computed value & Reactions）。 1.State(状

less、sass换肤方案记录 | 上野

https://lldlly.github.io/2020/07/16/lessSass/#4-%E5%9C%A8sass%E4%B8%AD%E4%BD%BF%E7%94%A8mixin

前言现在换肤的场景越来越多，特此总结一下自己使用过切实可行的两种换肤方案，less和sass各一种，less配合的vue项目，sass配合的react项目；大体的思路都是一样的： 1.将主题会用到的颜色都使用变量定义；2.使用less/sassmixin和函数实现不同主题的颜色选取；3.在body上放一个用于区别主题的类名或者属性，通过动态更换这个类名，实现主题的切换； Less1.效果定义了

vue3.0创建项目初体验 | 上野

https://lldlly.github.io/2020/09/27/vue3-0init/#%E4%BB%A3%E7%A0%81

vue3.0已经发布啦~记录一下自己创建vue3.0项目的学习过程。 更新的一些东西 Object.defineProperty => Proxy vdom 静态标记更加强大 Composition API vite 初始项目一改vue2.x使用vue-cli, vue3.0基于vite去创建项目： 1234npm init vite-app c

node小记 | 上野

https://lldlly.github.io/2021/11/10/node-path/#dirname

前言偶尔会写一些 node 小工具，由于不是经常写忘的很快，特此记录一下一些常用的依赖包之类的； 支持esmodule修改type属性； 1234567891011121314151617181920{ "name": "server", "version": "1.0.0", "descri

vue3.0数据双向绑定学习记录 | 上野

https://lldlly.github.io/2020/06/04/vue3/#vue3-js

尤雨溪说：“管你学不学的动，老子就要更新！” 玩笑开完了，代码撸起来~ 😄 下面是使用自己实现的双向绑定js在页面的效果： index.html 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 &l

恢复本站正常运行 | 上野

https://lldlly.github.io/2022/06/04/live2dApi/#%E8%87%AA%E5%B7%B1%E9%83%A8%E7%BD%B2live2d-api-php

需求背景相关政策等一系列原因，原本的 cdn.jsdelivr.net免费cdn不能访问，导致本站崩掉。为了恢复本站的正常运行，做了以下恢复措施。 替换 npm CDNunpkg.com npm cdncdn.jsdelivr.net/npm => unpkg.com github cdncdn.jsdelivr.net/gh => 本地加载 自己部署live2d_api(php)

uni-app 踩坑 | 上野

https://lldlly.github.io/2020/07/30/uni-app/#%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BAbase64%E5%9B%BE%E7%89%87%E4%B8%8D%E6%98%BE%E7%A4%BA%E7%9A%84%E5%9D%91

H5端 uni-load-more 触底不刷新问题 uni-page标签 height不能写成100%，要写height: auto;. 微信小程序更改CheckBox样式12345678910111213141516/* #ifdef APP-PLUS || MP-WEIXIN */ checkbox .wx-checkbox-input{ border-radius: 50%;

react-redux使用 | 上野

https://lldlly.github.io/2021/10/22/react-redux/#%E6%80%BB%E7%BB%93

前言上两月忙其他的事情，由此学习的步伐暂停了近两个月的时间，现在终于有时间继续啦！之前在学习 redux 的过程中没有整理笔记，继续开始的时候发现知识点居然忘记了好多，还是老话说的好：“好记性不如烂笔头！”；写成一篇文章一是对自己学习过程的记录，也是对知识点的总结，最终目的是为了让知识点掌握的更加牢固~ 安装依赖提供了两个 api Provider 为后代组件提供 store connect 为

dva小记 | 上野

https://lldlly.github.io/2021/11/05/react-dvajs/#%E4%BC%A0%E9%80%81%E9%97%A8

dvadva把redux和redux-saga组合起来，避免了store中需要写watcher saga、worker saga、reducer、action等一堆的东西，增加state的时候减少多个文件反复横跳的情况；dva提出了model的概念，通过reducers, effects 和 subscriptions 组织 model，大大提高开发便利度！其还集成了react-router, r

categories | 上野

https://lldlly.github.io/categories/

粗粝的生存需求将我们从**的高峰拽下，抛入生活的撕扯琐碎之中。

generator打印斐波拉契数列 | 上野

https://lldlly.github.io/2021/02/26/generator/#generator%E5%86%99%E6%B3%95

斐波拉契数列斐波拉契数列又称“兔子数列”，例如 [0, 1, 1, 2, 3, 8, 13, 21, 34];数学公式为： F(n)=F(n - 1)+F(n - 2) 打印斐波拉契数列普通写法1234567891011121314151617/** * * @param {*} len 返回数组的长度 */function setFS(len) { if(!le

echart 记录 | 上野

https://lldlly.github.io/2022/08/19/echart/#%E6%95%88%E6%9E%9C-2

浅浅做个记录 一. 环形图 + 自定义文字效果其中包含的配置点： 自定义文字 graphic； 图例文字超过6个省略； 色彩配置； 饼图 => 环形； 不要饼图的指引线和文字； 色块直接的白色间隔； title放到圆环中间； 配置1234567891011121314151617181920212223242526272829303132333435363738394041424

reduce 与 reduceRight 与 compose | 上野

https://lldlly.github.io/2020/07/07/compose/#compose

前言 reduce这个方法真的已经学习过很多次了，学了之后也很少用，又不记得了~ 😂再来复习一遍。 reducearr.reduce(fn)的返回值是处理的结果；reduce 函数接收4个参数: Accumulator (acc) (累计器)  Current Value (cur) (当前值) Current Index (idx) (当前索引) Source Array (src)

Markdown常用语法测试 | 上野

https://lldlly.github.io/2019/11/22/md/#%E5%9B%BE%E7%89%87

测试文字这是一篇测试的文章，随便写一些什么东西吧。大学时，时间是一学期一学期来计算的；毕业后，时间就变成了一年的一年的计算，感觉一晃就是一年，一晃就是好几年…… 这是一篇测试的文章，随便写一些什么东西吧。大学时，时间是一学期一学期来计算的；毕业后，时间就变成了一年的一年的计算，感觉一晃就是一年，一晃就是好几年…… 测试代码这里来放一点代码吧： 12

测试HTML标签展示&

Composition API 和 React Hook区别 (学习笔记) | 上野

https://lldlly.github.io/2020/09/18/compositionApi/#Composition-API

Composition API与React Hook很像，说说区别？ React Hook 从React Hook的实现角度看，React Hook是根据useState调用的顺序来确定下一次重渲染时的state是来源于哪个useState，所以出现了以下限制： 1.不能在循环、条件、嵌套函数中调用Hook；2.必须确保总是在你的React函数的顶层调用Hook；3.useEffect、useM

记录create-react-app搭建react项目 | 上野

https://lldlly.github.io/2021/07/09/create-react-app/#%E6%80%BB%E7%BB%93

前言记录一次通过 create-react-app 搭建一个 react 项目的过程，坑一个接着一个~ 1. 创建项目1npx create-react-app my-app --typescript 2. 扩展 webpack 配置需要用到 react-app-rewired customize-cra 1yarn add react-app-rewired customize-cra -D 配

create-react-app配置整理 | 上野

https://lldlly.github.io/2022/01/17/create-react-app2/#%E4%B8%83-husky-lint-staged

一. 修改 webpack 配置 需要用到 react-app-rewired customize-cra 1yarn add react-app-rewired customize-cra -D 修改package.json 1234567"scripts": { "start": "react-app-rewired sta

CSS3新增特性 | 上野

https://lldlly.github.io/2017/09/21/css3/#12-%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80-flex

一.选择器1. 关系选择器 后代选择器 ul li 选择所有的后代元素子代选择器 ul > li 选择ul的儿子紧邻选择器 .box + li 选择.box后面的一个li元素兄弟选择器 .box ~ li 选择.box后面所有的li元素 2. 属性选择器 ：通过属性来选择对应的元素 （1）E[属性名] ： 选择所有的具备这个属性的E元素（2）E[属性名=值] ：选择所有的具备这个 ‘属性

小工具记录 | 上野

https://lldlly.github.io/2020/08/10/utils/#GitHub-JsDeliver-%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E5%8A%A0%E9%80%9F

node 热更新工具nodemonhttps://www.npmjs.com/package/nodemon node版本管理工具 nhttps://github.com/tj/n npm 源管理工具 nrmhttps://github.com/Pana/nrm 把png/jpg转svg 的网站https://www.vectorizer.io/images/upload.html 把svg转ic

EventLoop事件循环练习题 | 上野

https://lldlly.github.io/2020/12/10/taskdemo/#%E5%89%8D%E8%A8%80

前言12345678910111213setTimeout(() => { console.log('timeout');}, 0);Promise.resolve().then(data => { console.log('then');});console.log('start&#

linux安装Jdk | 上野

https://lldlly.github.io/2022/08/08/linux-jdk/

Java Archive Downloads - Java SE 8 JDK下载需要注册账号，感谢无名大神提供账号：账户：[email protected]密码：OraclePassword123! 找到 Linux x64（找自己服

自定义hooks | 上野

https://lldlly.github.io/2021/07/29/react-hooks/#%E4%BD%BF%E7%94%A8-1

自定义 hooks 记录 记录一下常用的自定义 hook~~~ useForceUpdate 当我们使用React.PureComponent定义类组件的时候，因为React.PureComponent只是对数据做浅比较，当数据结构非常复杂的情况则可能出现数据更新页面不更新的情况，react 提供了一个forceupdate方法用来手动重新渲染组件，而函数组件是没有这个方法的，如果也想要实现手动

React.createContext( ) | 上野

https://lldlly.github.io/2020/07/08/reactcreatcontext/#layout-tsx-Consumer

前言之前自己写demo项目的时候用到了React16新出的Context方法，确实是个好东西！避免忘记特此记录。其实官网上对Context的讲解已经很详细了，接下来就记录一下我自己对Context的理解和使用；好记性不如烂笔头，我相信这是一个好习惯~ 产生react组件之间(父传子)使用props来传递数据，子组件里面通过this.props就能拿到父级传来的值。一旦组件深度嵌套，数据又在顶级父级

pdfjs在移动端预览pdf | 上野

https://lldlly.github.io/2021/09/16/pdfjs-dist/#%E8%B8%A9%E5%9D%91%E5%8E%86%E5%8F%B2

前言pdfjs传送门pdfjs + vue 移动端 踩坑记录，这个问题遇到过很多次，特此记录。 成功解决方案 去pdfjs的GitHub地址把代码拉下来； 没有glup的环境需要安装一下gulp: 1npm install -g gulp-cli 安装项目依赖 1npm install 运行服务,运行之后打开地址http://localhost:8888/web/viewer.html； 1g

Dart（一） | 上野

https://lldlly.github.io/2022/04/06/dart1/#%E5%88%A4%E6%96%AD

Dart数据类型 数值 Number int double 字符串 String 布尔值 bool 数组 List 字典 Map Set 值唯一 无序的list,常用于数组去重 Runes Symbol Null 数值123// 1.数值 int intvalue = 0; double num = 1.2222; // 浮点数 字符串123456789101112// 2.字符串String

linux 常用命令记录 | 上野

https://lldlly.github.io/2022/08/03/linux/#%E6%9F%A5%E6%89%BE%E8%BD%AF%E4%BB%B6%E7%9A%84%E5%AE%89%E8%A3%85%E7%9B%AE%E5%BD%95

解压.tar123解包：tar xvf FileName.tar打包：tar cvf FileName.tar DirName .tar.xz123解包：tar xvf FileName.tar.xz打包：tar cvf FileName.tar.xz DirName .tar.gz 和 .tgz123解压：tar zxvf FileName.tar.gz压缩：tar zcvf FileNam

Dart学习笔记（二） | 上野

https://lldlly.github.io/2022/04/13/dart2/#async%EF%BC%8Cawait%EF%BC%8CFuture

Map 字典官网文档 常⽤属性： keys 获取所有的key值 values 获取所有的value值 isEmpty 是否为空 isNotEmpty 是否不为空 常⽤⽅法: remove(key) 删除指定key的数据 addAll({...}) 合并映射 给映射内增加属性 containsValue 查看映射内的值 返回true/false forEach map whe

tags | 上野

https://lldlly.github.io/tags/

粗粝的生存需求将我们从**的高峰拽下，抛入生活的撕扯琐碎之中。

github Token | 上野

https://lldlly.github.io/2022/07/11/gitToken/#%E7%94%B3%E8%AF%B7token

前言好久没在github上提交代码，提交代码报错: remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.remote: Please see https://github.blog/2020-12-15-toke

造轮子之react-router | 上野

https://lldlly.github.io/2021/07/22/react-router-dom/#matchpath

学习目标 使用 demo react-router 简介 实现 BrowserRouter HashRouter Router Route Switch Redirect hooks Prompt WithRouter MemoryRouter 其他组件 RouterContext LifeCycle matchpath 学习目标 通过对 react-router 的学习和

patch-package | 上野

https://lldlly.github.io/2022/04/12/patch-package/#%E6%B3%A8%E6%84%8F

安装传送门 123456# npmnpm i patch-package --save-dev# yarnyarn add patch-package postinstall-postinstall --dev 修改package.json123"scripts": { "postinstall": "patch-package&q

React.memo() | 上野

https://lldlly.github.io/2021/08/03/reactMemo/#%E6%80%BB%E7%BB%93

介绍React.memo()是 React 的一个顶层 API 且为高阶组件，它对组件做的事类似于React.PureComponet,不同的是：React.memo()是对函数组件进行优化，React.PureComponent是定义类组件使用的； React.Component、React.PureComponent了解React.memo()之前，让我们先来了解一下React.Compone

lerna | 上野

https://lldlly.github.io/2022/07/13/lerna/#%E7%9B%B8%E5%85%B3%E5%9C%B0%E5%9D%80%E8%AE%B0%E5%BD%95

相关地址记录github官网中文官网文章1文章2

2021年末——光怪陆离 | 上野

https://lldlly.github.io/2022/01/06/2021YearEnd/#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E

前言风吹花树，成长正酣。 随便一些感想光阴如白驹过隙，眨眼间一年的时间又过去了，自古有感于时间，无一不叹其短暂易逝。孩童时期盼望着快快长大去闯荡世界，如今毕业几年才知读书的时候才是人生最美好的一段时间啊！新冠疫情爆发至今都快3年了，不敢相信都已经3年过去了，每天都在盼望疫情早点结束，每天都会被新增的确诊人数拉回现实。以前出门只需要带个钥匙、手机就行，现在口罩都成为出门必备物品之一了。每每想到如此就

vue3.0 + less/sass | 上野

https://lldlly.github.io/2020/12/03/less/#%E6%9B%B4%E6%94%B9%E4%B8%80%E4%B8%8B%E9%85%8D%E7%BD%AE%E5%B0%B1OK%E4%BA%86

vue3.0项目增加less/sass 先安装less less-loader / scss scss-loader / style-loader 123456yarn add less less-loader style-loader -DEVoryarn add scss scss-loader style-loader -DEV 1vue add style-resources-lo

vue-cli2 / vue-cli3 / vite+vue3.0 打包环境区分 | 上野

https://lldlly.github.io/2020/12/07/vue-bulid-env/#3-%E8%AE%BE%E7%BD%AEbaseUrl-1

前言刚好最近把 vue-cli2 / vue-cli3 / vite+vue3.0 的环境区分都来了一遍，特此记录。下文的方法都是自己使用亲测有效的，不过也不是唯一的方法。 vue-cli2vue-cli2生成的项目目录下有build、config这两个目录，项目的webpack配置和运行环境的区分就是在这两个文件夹下去处理的； 1.下载cross-env1npm install cross-en

手写Promise，代码记录 | 上野

https://lldlly.github.io/2020/12/15/promiseJs/#%E4%BD%BF%E7%94%A8

规范 1.1 “promise”是一个具有then方法的对象或函数，其行为符合此规范。也就是说Promise是一个对象或者函数。 1.2 “thenable”是一个定义then方法的对象或函数，说句人话也就是这个对象必须要拥有then方法。 1.3 “value”是任何合法的JavaScript值（包括undefined、或者promise）。 1.4 promise中的异常需要使用throw语句

husky + lint-staged + commitlint | 上野

https://lldlly.github.io/2022/09/27/lint-commitlint/#%E9%85%8D%E7%BD%AE%E5%AE%8C%E6%AF%95

前言此前该部分内容记录在 create-react-app配置记录，随着husky6+后的更新，配置有很大的改变，特此新开一篇文章记录配置方法。 文档直通车： husky lint-staged commitlint eslint prettier 安装依赖包1pnpm install husky lint-staged @commitlint/cli prettier -D 配置husky

留言板 | 上野

https://lldlly.github.io/comments/

来自上野的留言: 有什么想问的？

vite反向代理、设置别名 | 上野

https://lldlly.github.io/2021/03/04/vue3-alias/

根目录下vite.config.js 1234567891011121314151617181920const path = require('path')export default { proxy: { '/api': { target: 'http://...:*',

vue3.0源码执行流程图 | 上野

https://lldlly.github.io/2021/06/01/vue3-0code/

最近学习vue3.0.11的源码，顺便画了一个流程图。防止图片丢失，贴在这里吧~

记录在Linux中安装MongoDB | 上野

https://lldlly.github.io/2020/12/22/linux-mongod/#%E6%9C%AC%E5%9C%B0%E9%93%BE%E6%8E%A5

下载123456789cd /usr/local/mkdir mongodbcd mongodb/wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.7.tgz 下载 tar -zxvf mongodb-linux-x86_64-4.0.7.tgz 解压 新建文件夹放数据库数据和log1234cd mongodb-li

Vant 375适配750项目 | 上野

https://lldlly.github.io/2021/09/01/vuxToVant/#%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE

前言如果自己的项目是按照750尺寸做的适配，引入vant组件就会出现，组件的样式都缩小一半的情况；github的issues里面已经有小伙伴提过类似的问题传送门 修改配置改法：利用postcss-pxtorem对项目和vant组件进行区别适配，修改postcss.config.js或者.postcssrc.js里面的配置: 12345678910111213141516171819202122//

includes与indexOf | 上野

https://lldlly.github.io/2020/06/22/includes/#%E6%80%BB%E7%BB%93

includes和indexOf都是用来检测数组或者字符串中是否包含某元素的方法，includes是ES6的。 indexOf indexOf 这个方法对大小写敏感，不能是indexof； 入参有两个：要查找的元素、开始查找的下标(可以不传)； 查找的元素存在，返回第一个满足条件的索引，后面的就不会管了； 查找的元素不存在，返回 -1; 特殊点：对数组中查询 NaN 是无效的； 123456