自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 rust + bevy 实现小游戏 打包成wasm放在浏览器环境运行

【代码】rust + bevy 实现小游戏 打包成wasm放在浏览器环境运行。

2024-09-14 10:14:02 512

原创 vue-cli 中 配置 productionSourceMap 为 false 失效?

最近 发现 vuecli 构建的 项目中配置的 productionSourceMap 为 false 后 ,生产代码 还是能够看到 sourceMap 文件。生效前提条件 得设置 NODE_ENV 为 production 才会生效!

2024-08-13 17:41:15 347

原创 unplugin-vue-components 插件配置 忽略 部分目录下的组件自动导入

unplugin-vue-components 插件

2024-08-01 14:04:50 341

原创 一个 基于nuxt3 + vite + ts 搭建的 网盘服务 (附带部署教程)

nuxtjs 以及服务部署

2024-07-19 17:19:03 313

原创 如何开发一个项目脚手架cli

由于私密安全问题 只提供了一个简单的实现思路 ,可以按照这个思路 ,去定制化开发属于自己公司的脚手架。

2024-06-21 14:18:55 420

原创 基于fabric封装一个简单的图片编辑器(包含 vue 和 react 两个版本demo)

对 fabric.js 进行二次封装,实现图片编辑器的核心功能。核心代码 不依赖 ui响应式框架vue ,react 都适用。只写了核心编辑相关代码便于大家后续白嫖二次开发核心代码我就没有打包发布 会 和 业务代码一起放到项目中。

2024-06-07 12:01:39 541

原创 小记一篇 vuecli4项目 打包内存溢出问题

vuecli 打包项目内存溢出问题

2024-04-17 13:27:20 923 1

原创 TypeScript实战系列之ts高手必备技能(最终篇)

ts 中 有一组关键字 (keyof typeof infer extends in as ) 用于利用已有的类型生成新的类型。ts中知识比较多, 这里只介绍个人觉得日常开发需要用到的部分。先来个开胃菜 下面这个类型的作用} & {[P in K]?: T[P];// 示例用法作用就是 将类型指定的键的属性变为可选属性学完这一篇,你就能随性所欲的来封装属于你的类型工具!以上基本涵盖了90% ts 的使用。配合类型体操练习题 多练练 ts就算ok了。下面附上 刷题地址。

2024-02-20 17:59:59 1048

原创 TypeScript实战系列之强力爆破泛型的困扰

让你不再害怕泛型

2024-01-30 16:06:19 1284

原创 TypeScript实战系列之合理运用类型

主要介绍一些ts 实战高频知识点

2024-01-29 15:10:10 735

原创 移动端 h5-table react版本支持虚拟列表

react h5 表格组件

2024-01-19 15:39:27 1371

原创 利用X6 制作一个简单的流程图工具

基于x6 封装一个流程图工具

2023-11-17 17:21:09 243

原创 vue3学习源码笔记(小白入门系列)------KeepAlive 原理

vue3 keepalive原理

2023-10-17 19:40:04 394

原创 一行代码优化 pdfjs 加载大文件的pdf 速度

优化大文件pdf 加载速度

2023-10-13 19:19:51 3992 8

原创 vue3学习源码笔记(小白入门系列)------provide和 inject 跨层级数据传递原理

需要从父组件向子组件传递数据时,会使用 props。对于层级不深的父子组件可以通过 props 透传数据,但是当父子层级过深时,数据透传将会变得非常麻烦和难以维护。而依赖注入则是为了解决 prop 逐级透传 的问题而诞生的,父组件 provide 需要共享给子组件的数据,子组件 inject 使用需要的父组件状态数据,而且可以保持响应式。使用例子// 父组件provide(/* 注入名 */ 'message', /* 值 */ msg)//子组件使用。

2023-10-12 16:45:59 332

原创 vue3学习源码笔记(小白入门系列)------computed是如何工作的

带着问题看源码:1.computed 是如何实现响应式的?2.computed 是如何实现计算结果缓存的?计算属性 也是内置 实现了 一个 reactiveEffect 来实现响应式计算属性可以从状态数据中计算出新数据,computed 和 methods 的最大差异是它具备缓存性,如果依赖项不变时不会重新计算,而是直接返回缓存的值,是否重新计算 取决于私有属性 _dirty。

2023-10-07 17:43:39 290

原创 vue3学习源码笔记(小白入门系列)------watch watchEffect是如何工作的

effectwatch 和 watchEffect 本质都是创建了一个新的 ReactiveEffect 来管理响应式等操作,根据 flush 的状态触发 job 的不同阶段更新。

2023-09-28 20:50:47 453

原创 vue3学习源码笔记(小白入门系列)------ 重点!响应式原理 代码逐行分析

这时候进行app 组件 processElement 由于存在子组件child 执行 mountChild ----> patch —> child 组件的processComponent child组件 也会和 app 组件 一样 去 初始化 instance 创建 ReactiveEffect 触发update 执行属于 child 的 componentUpdateFn 再 执行 child组件的 render 函数 child组件发生依赖收集。就是 数据 驱动 视图 更新的 桥梁。

2023-09-14 15:23:55 486

原创 vue3学习源码笔记(小白入门系列)------ 组件更新流程

vue组件更新流程

2023-09-01 17:41:37 542

原创 vue3学习源码笔记(小白入门系列)------ 组件是如何渲染成dom挂载到指定位置的?

以上就完成了 组件初始化工作。下面画了 几个流程图来辅助理解。最好阅读的时候自己 也可以画下安利一个好用的vscode流程图插件下一篇:准备写 数据代理这块。

2023-08-25 16:37:03 1283

原创 利用rollup打包 第三方库 @sentry/browser 为 umd 格式

sentry 打包 umd格式

2023-08-15 14:56:14 795

原创 mac从 vuejs/devtools 仓库 途径 获取chrome vue3开发者工具

mac 安装vue3 chrome 开发者工具

2023-05-11 17:21:23 211

原创 vite+vue3+sentry 前端监控 集成

项目集成sentry 监控服务

2023-04-23 09:05:48 1118

原创 搭建一个 vite +vue3+ ts 多入口项目

分享一下 最近给公司搭建的一个 vite 多入口 项目 (保密问题 只有一个空架子)github 链接 : https://github.com/duKD/vue-vite-multiple-entry。

2023-04-03 15:44:44 528

原创 一个 适用 vue3 ts h5移动端 table组件

一个适用 vue3 ts h5移动端 table 组件

2023-03-11 10:46:43 7177 29

原创 dart 刷 leetcode

dart

2022-12-28 21:13:59 149

原创 解决部分安卓机 自带浏览器 上h5页面 rem布局 受到 真机字体影响的问题

h5 适配

2022-12-27 21:39:09 1206

原创 5分钟彻底搞懂this指向问题 (附练习题)

当函数被调用时 ,会创建一个会话记录。记录方法 传入参数等信息,this 就是其中一个属性而已,会在函数执行时用到。

2022-11-02 14:54:56 108

原创 读懂css属性值

在查阅css 文档的时候 总是会出现 类似被包裹的语法提示,这些其实就是 css 的基本数据类型 就和编程语言中的基本数据类型至于编程语言一样重要,所以要想更顺畅的查阅css 文档 ,了解并熟悉css 基本数据类型是必要的。常见的数据类型再加上符号和关键字 就组成了css 的属性值语法下面献上我常用的css 查阅链接。...

2022-08-17 19:54:53 423

原创 webpack跟着敲入门--手把手打代码实现打包一个多入口的前端项目

手打代码 webpack 配置系列 适合小白入门观看

2022-05-27 11:10:03 754

原创 h5模拟文件拖拽上传

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2022-05-21 16:29:24 87

原创 利用IntersectionObserver提升首屏性能

场景首页展现内容很多,有时候一些元素开始不会出现在视口内,但是这些元素组件可能内部会执行一些消耗性能的动画。这时候 我们可以使用IntersectionObserver 去实例出一个监听器 去监听一组元素,可以判定他是否出现在视口内,这时我们再去实现某些操作。也可以配合实现图片懒加载上代码:<template> <section class="contain" ref="myScroll"> <div class="contain-item" v-for="

2022-05-17 19:32:59 349

原创 requestAnimationFrame实现全屏滚动评论

前言结合具体场景实战requestAnimationFrame业务场景:h5 技术: vue2 vant2评论可以自动的向上滚动 并且可以手动拖拉滚动条 查看上面的评论你可以把requestAnimationFrame认为是浏览器内部提供的一个钩子函数,执行时间是在 每一帧渲染开始前执行 是不会阻塞js 主线程执行 ,也不会触发多余的重绘操作下面是简单的demo代码代码比较简单就直接贴出来//commentView.vue<template> <section

2022-05-17 14:44:46 415

原创 html css js实现图片懒加载

原理img 标签 有个 src 属性 当src 不为空的时候 随着img 元素渲染到页面上的时候 会异步的去加载资源 。我们只需要 将 未出现在可视区 的 img 元素 src 设置为空即可 等它出现在屏幕 我们 再设置其src<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>懒加载</title> <style

2022-05-02 20:29:02 481

原创 常用的正则使用内容

this指向问题前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结学习内容:学习时间:学习产出:三级目录前言先来段常见的this的八股文:一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsi

2021-11-17 17:27:04 67

原创 利用 egg-socket.io 内置的 socket.io-redis 集群部署socket服务

socket.ioSocket.IO 是一个基于 Node.js 的实时应用程序框架,在即时通讯、通知与消息推送,实时分析等场景中有较为广泛的应用。文章目录socket.io前言一、介绍配置二、使用步骤1.准备2.测试前言但一台单机的socket服务无法支撑其业务时 我们需要集群部署实现请结合egg-socket.io 来阅读链接一、介绍配置先看下配置文件 config文件夹下// {app_root}/config/config.${env}.jsexports.io = {

2021-06-10 18:18:21 1532 3

原创 mongo中关于普通的query查询和管道聚合查询最优使用场景

目录前言普通的查询获取总数vs聚合查询获取总数普通的查询分页数据vs聚合查询获取分页数据(排序)总结前言最近在项目中使用聚合查询做普通的分页查询性能并没有普通的query查询效果好,下面详细说明一下普通的查询获取总数vs聚合查询获取总数实验数据 13000条左右;但是由于数据库设计不规范单条数据大小可达到100多k!!!//耗时27ms左右db.template_editors.find({ "handle_status": {

2021-04-15 20:20:55 513

原创 nginx 入门使用总结 ——(3)http proxy module 模块配置

目录介绍 反向代理二级目录三级目录介绍 反向代理       反向代理(reverse proxy)方式是指用代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络中的上游服务器,并将从上游服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外的表现就是一个Web服务器。充当反向代理服务器也是Nginx的一种常见用法;      &

2021-04-02 17:51:55 219 1

原创 nginx 入门使用总结 ——(2)http核心模块配置

文章目录介绍虚拟主机与请求的分发总结介绍一个典型的静态Web服务器 会包含多个server块和location块;如下:http { gzip on; upstream { … } … server { listen localhost:80; … location /webstatic { if … { … } roo

2021-03-31 09:31:27 371

原创 nginx 入门使用总结 ——(1)基本配置

nginx 入门使用总结 ——(1)基本配置文章目录nginx 入门使用总结 ——(1)基本配置安装基本配置块配置项结束最近抽空整理一下 工作中用到的nginx 相关知识。安装先去官网下载指定版本压缩包https://nginx.org/download/https://blog.csdn.net/qq_42815754/article/details/82980326相关命令常用操作 启动 重启进入 sbin 目录下./nginx 启动nginx./nginx -s re

2021-03-30 15:43:36 130 1

空空如也

空空如也

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

TA关注的人

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