自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 收藏
  • 关注

原创 ol标签自定义序列号(a)(b)(c)

使用ol标签自定义序列号

2022-06-15 19:16:49 646 1

原创 electron app开发笔记

electron桌面端app开发

2022-05-24 14:59:25 974 1

原创 解决electron iu进程跨域问题

使用 Electron 内置的网络请求钩子方法修改HTTP Header,在发出 HTTP 请求前,修改请求的 HTTP Header,在其中加入 Origin: ‘’;在收到 HTTP 回复后,修改回复的 HTTP Header,在其中加入 ‘Access-Control-Allow-Origin’: ['’]window.webContents.session.webRequest.onBeforeSendHeaders( (details, callback) => {

2022-05-18 15:25:21 1148

原创 seo优化记录

seo优化标签,语义化,h1,h2标签中只是简单的文字,不能嵌套其他标签,且h1只能有一个创建sitemap.xml站点文件,让谷歌百度搜索引擎等能够完整的爬取;主站点->其他站点;微数据结构化,国外用的多,国内用的少,规范:https://schema.org百度搜索引擎手动提交站点信息:https://ziyuan.baidu.com/linksubmit/url...

2022-05-13 17:52:24 149

原创 TypeError: loaderContext.getOptions is not a function

TypeError: loaderContext.getOptions is not a function

2022-05-05 15:06:19 5798 3

原创 electron优化笔记

electron优化笔记,启动缓慢优化

2022-04-24 11:55:40 1834

原创 docker、cicd、k8s笔记

docker、ci/cd、k8s学习笔记,查缺补漏,方便以后查阅

2022-04-20 10:41:30 212

原创 nextjs+antd+prisma开发记录

项目中包含了jwt、权限校验、markdown编辑器、react hooks、antd ui、prisma orm、Typescript等运用;完整项目代码:https://github.com/bfclouds/nextjs-blog,这是我学习nextjs服务端渲染的简单blog项目,适合准备学习nextjs的新手学习;

2022-04-10 22:24:15 569

原创 nextjs data类型序列化报错

Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types

2022-04-07 14:57:58 929

原创 Hydration failed because the initial UI does not match what was rendered on the server

Hydration failed because the initial UI does not match what was rendered on the server

2022-04-03 17:21:54 2410 4

原创 es module中使用__dirname

__dirname is not defined in ES module scope

2022-03-30 20:15:58 2380

原创 node cli 命令行工具实现

node cli 命令行工具实现,开发自己的个性化命令行工具,解放不必要的重复劳动,提升工作效率,开开心心的敲代码,哦耶

2022-03-30 16:48:11 1205

原创 taro react 微信小程序中使用echarts

1、从echarts-for-weixin下载ec-canvas并放到src目录下2、修改echarts.js文件,找到t.addEventListener(e,n,i)改为t.addEventListener?.(e,n,i),不然会报错t.addEventListener is not a function;3、在你的页面的配置文件中(*.config.js),添加usingComponents:{“ec-canvas”: “…/…/ec-canvas/ec-canvas”},这里是为了在taro中

2022-02-09 14:10:05 2497 3

原创 2021-11-23 vue3.2.21借助dayjs封装dateTimeSelector日期时间选择器组件

参考element的ui样式,自己动手写封装一个dateTime选择器组件;自己动手写clickOutSide指令;

2021-11-23 22:59:34 770

原创 2021-11-04 ios web输入框问题

记录ios web出现的一些问题的解决方法1、输入框输入框失去焦点后下面有一条很细的蓝线解决方式/*css*/input { outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgb(0,0,0); }2、返回上一页未刷新在ios浏览器上点击返回按钮回到上一页,页面未刷新,保持着之前的状态;解决方式var u = navigator.userAgent, app = n

2021-11-23 09:21:10 160

原创 2021-11-17 contentEditable模拟的输入框聚焦后光标在最前面

input框无法随着输入自动的变长,可以利用div contentEditable模拟input框来实现div模拟的输入框在focus的时候会有些问题聚焦的位置在最前面,而不是在最后面,解决办法 const target = itemRef.value; target.contentEditable = 'true'; target.focus(); // 关键点 const range = window.getSelection(); range.selectAllChildr

2021-11-18 13:11:05 2172 1

原创 vue 中你不知道的刷新姿势

笔者啊,你居然写篇文章说页面的刷新?那多简单啊,window.location.reload 不就完事了嘛,小样。reload真的是你想要刷新吗?调用 reload 刷新整个页面重新加载资源处理html、css,执行js各种初始化…我jo的这是刷新,但不是追求极致的我们的想要的刷新谈谈我认为该怎么刷新创建一个redirect页面,这个页面的作用只有一个,就是跳转,即const { params, query } = useRouter()replace({ path:

2021-08-09 16:04:56 94 1

原创 在使用vue3开发了几个项目后的小技巧分享

vue3使用总结reactive通过reactive定义的响应式数据,解构出来后会丢失响应;需要使用toRefs,为源响应式对象上的property新创建一个 ref const testReactiveVal = reactive({ name: '渣渣辉' , desc: '一刀99999'}); const { name, desc } = testReactiveVal; // name, desc丢失响应式 const { name, desc } = toRef(testRe

2021-08-06 17:58:06 509

原创 Unexpected usage at EditorSimpleWorker.loadForeignModule

vue+webpack/vue3+vite使用monaco editor时报错 Unexpected usage at EditorSimpleWorker.loadForeignModule解决,react同理

2021-03-21 14:43:24 9880 12

原创 git急救手册

急救-代码写错分支了在切换到其他分支后忘记切回来,然后直接写代码,当写完要提交的时候突然发现,哦买噶!!!!怎么忘记切分支了,哭唧唧;别着急哭呀,还是有办法补救的。git reset --hard HEAD^ // 撤销到add前git stash save -u "不小心在其他分支上修改的代码"git checkout 你的分支 // 切换回你的分支git stash list // 查看所有分支git stash pop 0 // 将堆栈中的最近一次 stash,应用到工作区git st

2021-03-18 17:28:34 80

原创 vue3-proxy响应式原理实现

vue2.x使用defineProperty重写get,set实现响应式,同时无法监听数组的变化,需要重写push、pop等方法。并且在初始化的时候遍历data,对每个数据进行处理,当data中的数据多,层级多时可能出现白屏的情况。而vue3使用proxy实现响应式,本身就可以监听数组的变化,同时在get的时候 return reactive(result),使的只有在调用的时候才会进行处理,与vue2相比有了极大的优化,并且除了get和set外,还能监听delete!let data = { se

2021-03-13 17:20:32 633

原创 vue2.x响应式原理实现-代码干货带你手写响应式

vue作为现在热门的三大框架之一,相信大部分前端开发者都能够熟练的使用vue,但是能够深入了解其原理的可能并不多,很多人都知道vue响应式是通过difineProperty来实现的,相信随便百度一下,相关的面试题及答案一大堆,你知道是通过defineProperty重写get,set方法实现的,可是你有真正的了解过吗?好了,上干货!!!实现对象的监听此时能够监听对象数据的变化,还不能监听数组的变化。为什么?因为它本身就不可以呀,那你可能要问了,明明vue的数组,,通过push、pop、shift等等方法

2021-03-13 16:01:10 172

原创 vscode配置 eslint+prettierrc自动格式化vue3、ts、tsx文件

在设置中选择默认为下面这个,安装vscode的tslint插件,然后选择保存时自动格式化

2021-03-12 20:11:32 6789

原创 canvas生成二维码海报-可配置

简介可通过选择图片、配置图片间距、是否展示合伙人等,使用canvas来生成海报,下面为选择4和2张图片的海报截图;开发过程中学到的东西1、自动闭合及非零环绕原则在绘制气泡和海报的时候需要绘制圆角,网上有查找到相关的方案但是并不满意,后来了解到canvas绘制arc会首尾相连,即第一个arc的终点会连接第二个arc的起点(在没有使用moveTo的情况,使用moveTO已经把画笔移动走了,当然不会连接啦),这样只需要绘制四个角的圆弧就可以啦;_drawCanvasBoard (ctx) {//

2021-03-06 16:30:52 433

原创 封装vue组件库-vaui库

vaui第一次发包有点小激动,这是一个根据公司ui的设计习惯,简单封装了这个vue2.X ui组件库,该组件库参考了bootstrap、element和vant,但是还是有很多不完善的地方,希望自己继续学习,继续努力,继续加油吧!!!安装yarn add @fei_w/vaui// 或者npm install --save @fei_w/vaui使用在main.js中import { Icon, Cell, Avatar, Layout, DividerLine} f

2021-02-27 17:40:45 368

原创 pwa完整实现

看文章前记得先点个赞哦;在上篇文章中简单介绍了pwa的基本配置,该文章主要写的是实际项目中的使用,包括如何添加缓存,删除不必要的缓存,如何优化缓存 , 如缓存策略,哪些资源应该网络优先,哪些资源应该缓存优先等;目录结构干货代码/** * sw.js * service worker注册之后install事件会触发 */const CACHE_NAME = 'pwa_v1'// 需要缓存的页面const urls = [ '/pwa/index.html', '/pwa/man

2021-02-20 10:15:21 787

原创 从零搭建pwa项目

基本实现相信会看这篇文章的同学都知道pwa是什么,所以就不废话了!1、index.html首先在window加载完后并serviceWorker存在的情况下注册,不存在的情况不会影响代码的任何功能,index.html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="

2021-02-19 21:50:29 456

原创 vue3+ts使用g2

安装g2npm install @antv/g2plot --save引入并使用在需要使用的页面引入g2,记住要在onMounted中使用哦,不然节点还没渲染出来,没有容器。下面提供一个例子,引入折线图:<div class="pr-3 pl-3"> <p>近一年收益情况:</p> <div class="d-flex m-btn-wrapper pt-2"> <button class="w-50 btn ac

2021-01-21 23:28:07 3274

原创 性能优化篇-解决重排重绘导致的性能问题

重排与重绘导致的性能问题浏览器的重排重绘导致一定的性能问题,频繁的性能操作会严重导致浏览器卡顿,影响用户体验;因此在开发过程中我们应该尽量的避免浏览器的重排重绘,从而性能与用户体验;避免重排与重绘的例子例: 当要改变某个dom的位置时,平常的方法就是获取这个dom节点,修改该节点的style样式,当修改这个样式时改变了cssom;因此浏览器重新渲染;不明白为什么要重新渲染?因为浏览器的渲染是遵循下面公式:dom + cssom = renderDom所以cssom改变了,renderDom也要变

2020-09-18 18:42:16 1016

原创 微信开发者工具网页h5本地开发,解决微信公众号绑定域名,本地无法调用微信api问题

第一步 本地配置文件以及固定端口号项目使用vue开发,首先修改vue.config.js配置文件,固定端口号,在项目目录中新建.env文件,vue启动的时候如果是本地,会自动调用.env文件,启动的时候怎么知道是本地呢?这是我学习vue后好长一段时间都疑惑的问题,后来了解到,当你本地启动项目的时候是这样的:yarn serve 或者npm run dev 或者npm run serve你执行了命令,vue就能知道你是本地启动的呢,于是它便自动查找是否存在.env配置文件,如果有便读取,所以我们做

2020-09-05 14:07:29 2241

原创 完美解决微信开发者工具网页版开发,url输入http自动跳转到https的问题

在微信开发者工具中输入了https的url后,在此输入http的url会自动跳转到https,解决办法如下:首先切换到如下目录中:cd ~/Library/Application Support然后删除对应的微信开发者工具目录:sudo rm -r -f ./微信开发者工具删除后重新打开微信开发者工具,成功访问http协议的项目:...

2020-09-05 13:21:57 4631 2

原创 ts、typeScript,监听ts文件变化,自动编译并运行ts文件

众所周知typeScript是不能直接运行的,同时也是不被浏览器所识别的,它需要编译成js文件后才能运行;这样就造成了很多不便,有没有什么办法能够像vue、react的热更新一样,只要改变代码,保存后就能自动的编译;而不需要我们自己手动的去使用tsc来编译呢?方法当然是有的;1、使用ts-node直接运行ts文件通过npm全局安装ts-node插件npm install -D ts-node直接在终端使用ts-node运行ts文件ts-node ./src/croller.ts此时可以在终

2020-08-27 23:21:50 4905

原创 swiper6填坑:vue-awesome-swiper

swiper6填坑:vue-awesome-swiper1.引入cssswiper6的css变了位置import 'swiper/swiper-bundle.css'2.err swiper not drfined在项目中使用了vue-awesome-swiper,在已引用的情况下报错:"Error in mounted hook: “ReferenceError: Swiper is not defined”,仔细查看错误提示,“ at src/components/card/cardLa

2020-07-31 21:55:14 3281

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除