TE-茶叶蛋-CSDN博客

原创如何优化 Vite 项目中的 Lodash 引入：从 Tree Shaking 到自动化测试

在现代前端开发中，优化代码的体积和构建速度是非常重要的。特别是在使用 Vite 作为构建工具时，如何正确地处理 Lodash 这种通用的工具库，变得尤为关键。在本文中，我将分享我们如何在 Vite 项目中优化 Lodash 的引入方式，并确保优化后的代码能够正常运行。我们分析了几个优化 Lodash 引入方式的解决方案，并最终决定采用更适合我们项目需求的方案。

2024-08-16 19:16:29 1540

原创 vue3的自定义hooks

Vue3 的 hook函数的出现，可以让我们更好抽离重复逻辑，聚合相同的功能。它与vue2 中的mixins有点类似，但是相对 mixins 而言， hooks 函数更清楚复用功能代码的来源,更清晰易懂。使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。1、具备可复用功能，才需要抽离为 hooks 独立文件2、函数名/文件名以 use 开头，形如: useXX3、引用时将响应式变量或者方法显式解构暴露出来；vue3 hooks 现在使用比较广泛，介绍基本概念与原理。

2024-01-11 16:57:04 1660 1

原创前端本地覆盖资源(local override)调试

Chrome 65 中的开发者工具将包含以下新功能：本地替换新的无障碍工具更改标签页新的搜索引擎优化 (SEO) 和性能审核Performance 面板中的多个录制内容使用 worker 和异步代码执行可靠的代码单步调试本篇文章主要学习与实践下本地替换这个功能提示：以下是本篇文章正文内容，下面案例可供参考官网详细描述。

2024-01-11 09:40:18 1280

原创 vue3项目使用pako库解压后端返回zip数据

外部接口返回一个图片数据是经过zip压缩的，前端需要把这个数据处理成可以显示的图片。大概思路：zip解压-> 转换为base64数据 -> img标签显示。pako详细描述🚀 npm 直达pako 是一个流行的 JavaScript 库，用于在浏览器中进行数据压缩和解压缩操作。它提供了对常见的压缩算法（如 Deflate 和 Gzip）的实现，使开发者能够在客户端上轻松进行数据压缩和解压缩，以减少数据传输大小和网络带宽消耗。

2023-12-29 18:03:04 2315

原创 Vue3+hooks快速接入Lodop打印插件

上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。

2023-12-15 14:22:59 2279 1

原创 828华为云征文｜华为云 Flexus云服务器X实例-选购到创建宝塔

华为云Flexus云服务器X实例，是由国家科技进步奖获得者、华为公司Fellow、华为云首席架构师顾炯炯牵头研发。它基于擎天QingTian架构、瑶光云脑、盘古大模型等根技术创新，是业界首款应用驱动的柔性算力云服务器，主要面向高科技、零售、金融、游戏等行业大多数通用工作负载场景，包括网络应用、数据库、虚拟桌面、分析索引、微服务、CI/CD等。从购买到配置再到登录实例再到搭建宝塔面板这个过程，整体的感觉还是非常丝滑的，体验很好的，选择华为云服务器，意味着您将获得一个稳定而高效的云计算环境。

2024-09-14 10:37:03 397

原创 performance.now() 和 Date.now()

和Date.now()是 JavaScript 中用于获取当前时间的两个不同方法，但它们的用途和特性有所不同。1. 概述: 返回一个精确到微秒（千分之一毫秒）的时间戳，用于精确测量时间间隔。Date.now(): 返回自1970年1月1日 00:00:00 UTC以来的毫秒数，用于获取当前的时间戳。2. 精度精度非常高，可以精确到小数点后三位，通常用于测量代码执行的时间。100.345表示自页面加载以来的时间是 100.345 毫秒。Date.now()精度相对较低，只精确到毫秒。

2024-08-28 11:50:04 432

原创 Window Performance API

Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();

2024-08-28 11:47:02 1933

原创 pnpm-hoisting

pnpm的依赖管理方式与传统的npm和yarn有显著的不同，它采用了一种叫做hoisting（提升）和（内容可寻址存储）的策略来管理依赖。以下是对pnpm的 hoisting 依赖管理方式的详细解析。pnpm的 hoisting 依赖管理方式通过内容可寻址存储和符号链接大大提高了依赖管理的效率和可靠性。虽然这种方式在某些情况下可能带来一些兼容性挑战，但它也通过模块隔离和资源共享带来了巨大的优势。如果你正在处理复杂的依赖树或希望优化项目的依赖管理，pnpm是一个值得考虑的工具。

2024-08-15 09:16:32 693

原创 2024-08-13外语学习

Disgusting” 一词源于拉丁语 “gustus”，意为“味道”，加上否定前缀 “dis-” 形成了 “disgust”，意为“使失去胃口”或“使厌恶”。随着时间的发展，这个词演变成形容词 “flustered”，用来描述人在面对突发状况或压力时表现出的紧张、慌乱或不知所措的状态。随着时间的发展，这个词演变成 “revision”，用来描述对文本、计划或想法进行修改或校正的过程或结果。在 “disgusting” 中，“dis-” 表示“不”或“相反”的含义。让我们来分析一下这个词的词源和历史。

2024-08-13 16:06:52 693

原创 Nest.js 后端生态系统中常见的技术栈组合

Nest.js 是一个基于 TypeScript 的 Node.js 框架，它提供了一个高度可维护且易于扩展的架构来构建高效、可靠的服务器端应用程序。Nest.js 非常适合构建微服务架构，并且可以轻松地与其他技术和工具集成。

2024-08-12 23:21:12 766

原创 JavaScript-Object

在 JavaScript 中，Object是一个非常重要的全局对象，它提供了许多方法来处理对象。以下是Object。

2024-08-12 18:34:03 1186

原创在 Vue 3 项目中使用 Element UI Plus ＜el-calendar＞组件与时区处理

在 Vue 3 项目开发过程中，我们经常需要对 UI 组件进行定制以满足特定的业务需求。本篇技术博客将分享如何在 Vue 3 项目中使用 Element UI Plus 的组件来展示自定义内容，并实现页面跳转。同时，我们也会探讨如何处理时区问题，确保日期和时间的准确性。以下是使用组件并定制其内容的示例代码：// 假设 dataArr 是从 API 获取的数据 const dataArr = ref([ ]);// 处理点击事件，例如页面跳转 };

2024-08-08 18:54:14 1164

原创理解 React Hooks：用例与实践

React Hooks 是 React 16.8 引入的一项强大功能，它们为函数组件引入了状态和其他 React 特性。以下是对 React 常用 Hooks 的详细介绍和使用指南。forwardRef与一起使用，可以自定义父组件通过 ref 访问的子组件内容。}));});return (forwardRef用于将 ref 转发到子组件。用于定义暴露给父组件的实例值。forwardRef 与 useImperativeHandle与vue3 中的使用比较。

2024-08-04 19:37:27 1069

原创 Node.js 根据表结构动态生成目标代码

在现代的前端开发中，使用 Vue3 搭配 Element Plus 进行组件化开发已经成为一种常见的实践。最近，我在一个项目中需要根据数据库表结构动态生成表格代码，这让我经历了一次从 MySQL 到 SQL Server 的旅程，并学习了如何使用 ejs 模版引擎来生成代码。在这篇博客中，我将介绍如何使用 mysql2/promise 和 mssql 库连接数据库，以及如何利用 ejs 动态生成代码。

2024-08-02 19:23:31 418

原创抄作业-跟着《React通关秘籍》捣鼓React-playground-上集

react-playground，类似vue-palyround

2024-07-28 18:42:48 1219

原创 TypeScript-Omit/Pick

类型在实际开发中非常有用，尤其是在需要从一个大的接口中提取特定属性时。Omit：通常用于创建一个没有某些属性的新类型，这在需要排除某些敏感数据或不需要的字段时很有用。Pick：通常用于创建一个包含特定属性的新类型，这在需要精简对象或传递特定属性集时非常有用。的字面意思可以理解为“送出”或“放置出去”，在英语中演变为“省略”或“遗漏”的意思。，并创建一个新的类型，该类型仅包含这些被选择的属性及其类型。的含义紧密相关，即从一个对象类型中“省略”某些属性。Pick：创建一个仅包含指定属性的新类型。

2024-07-25 17:49:44 1082

原创 TypeScript-Exclude

TypeScript 常用的类型 Exclude类型是一个非常有用的工具，可以帮助你在 TypeScript 中创建更精细和精确的类型。通过排除不需要的类型，你可以更好地控制你的类型系统，并使代码更加健壮和类型安全。

2024-07-25 15:20:17 340

原创 TypeScript-内置应用程序类型-Recode

学习TypeScript 内置应用程序类型在 TypeScript 中，Record是一个实用类型，它允许你基于一个键的联合类型和一个值的类型，来创建一个新的对象类型。接受两个类型参数：第一个参数K是键的联合类型，第二个参数T是所有键对应的值的类型。其中KeysUnion是一系列可能的键名的联合类型，ValueType是这些键所对应的值的类型。例如，假设你有一个键的联合类型Keys和一个值的类型Value，你可以使用Record创建一个类型，该类型表示一个对象，其键是Keys中的一个，值是Value。

2024-07-23 13:57:52 847

原创 ts检验-变量的类型不会包含 undefined的几种处理方法

那么为了处理 TypeScript 报错 “Argument of type ‘ApiFunction | undefined’ is not assignable to parameter of type ‘DelApiFunction’，Type ‘undefined’ is not assignable to type ‘DelApiFunction’”，你需要确保。在这个上下文中是存在的，可以使用 TypeScript 的非空断言操作符。你可以根据自己的业务逻辑来定义。赋一个默认值，确保它不是。

2024-07-17 16:46:34 364

原创一文读懂：URL链接预览与下载的幕后机制

随着互联网的发展，我们经常在浏览网页时遇到需要下载或预览的文件。这些文件的处理方式在很大程度上取决于文件类型和服务器的配置。在本文中，我们将深入探讨URL链接预览与下载的幕后机制，了解浏览器如何处理文件的预览与下载，并分析相关技术细节。

2024-07-12 14:49:17 997

原创 2024-07-09_外语学习

Routing Instruction对于确保货物能够安全、及时并符合所有相关规定地到达目的地非常重要。它不仅帮助协调不同物流环节，还能提高运输效率，减少误解和错误，确保客户满意度。在跨境电商的物流业务中，“Routing Instruction”指的是一组指示或指导，规定货物从起始地到目的地的运输路线和方法。

2024-07-09 15:27:22 1126

原创 2024-07-03_外语学习

拉丁语 serere “连接，链接，绑在一起”， series “行，链，系列，序列，继承”；servare（拉丁语，意为“保护，保存，观察”）；在拉丁语中，“serere” 的派生词 “series” 意思是“一行”、“一列”或“一系列”，它描述了事物按顺序排列的状态。在现代英语中，“serial” 通常表示“连续的”、“系列的”或“连载的”，它可以作为形容词或名词使用。在跨境电商中，SSCC的应用可以显著提高供应链的透明度和效率，因为它允许自动化的追踪和管理，确保货物在国际运输过程中的准确性和安全性。

2024-07-03 15:26:27 866

原创 2024-07-01_外语学习

全球化的环境下，外语，也是生活的一部分。其中特别是单词，背了忘，忘记背。主要是没实际运用，死记硬背，应付下应试教育还可以。所以后面的单词记忆，用理解，词源，结合生活,代码应用等的方式来记忆。

2024-07-01 18:25:25 1023

原创 eDDA（电子直接扣款授权）

记录金融相关单词。

2024-06-29 11:34:46 484

原创 vue3特性-Teleport源码

Teleport是 Vue 3 的一个内置组件，它允许你将组件的内容渲染到 DOM 树的其他位置，而不是其父组件的 DOM 层次结构中。下面是对Teleport实现源码的详细分析。在中定义了Teleportimport {VNode,process(n2: VNode,) {// 处理逻辑},// 移除逻辑},// 移动逻辑},hydrate: null // SSR 相关逻辑Teleport通过其process。

2024-06-21 16:50:51 512

原创 vue3-自定义指令来实现input框输入限制

使用vue中的自定义指令来实现input框输入限制其中关键代码强制触发input ，来避免，输入规则外的字符时，没触发vue的响应，导致实际值的不一致的问题。使用debounce 来优化性能从vue和lodash库中导入必要的类型和工具函数。定义接口，扩展以包含属性。.valuevalue = ''.replace(/[^\d.]/g, '') // 删除非数字和非小数点字符.replace(/^\./, '') // 删除开头的小数点。

2024-06-18 17:49:45 1122 1

原创从0到1上线小程序的步骤

开发一个小程序（例如微信小程序）涉及到多个阶段，每个阶段都有特定的步骤和要求。以下是详细的步骤及相关资料和网址，帮助你在开发前、开发中和开发完成后的上线部署过程中顺利进行。通过以上步骤和资料，你可以系统地开发、调试和上线一个高质量的微信小程序。

2024-06-18 15:59:21 803

原创 vConsole核心源码学习

vConsole是一个用于移动端的调试工具。提供日志、网络、系统信息、元素查看和存储等调试功能。使用 Svelte 作为前端框架来构建调试面板。导入必要的模块和类型。定义常量，用于标识vConsole的 DOM 元素。if (!!if (!!_onload();} else {

2024-06-14 16:07:08 482

原创数据库主键设计

数据库主键的设计是数据库架构中的一个重要环节，不同的主键生成策略适用于不同的场景和需求对于单体应用或简单的分布式系统，自增ID可能是最简单高效的选择。在分布式系统中，尤其是跨多个数据中心时，雪花算法因其高性能和全局唯一性成为优选。当全局唯一性是首要考虑因素，且对存储空间不太敏感时，GUID是合适的选择。具体场景下，也可以根据业务需求考虑复合主键或业务相关ID的方案。

2024-06-05 22:52:53 850 2

原创 Lodop 实现局域网打印

有时候会根据不同的ip来获取资源文件，这里遇到场景，通过不同的局域网ip来获取本地资源。是Lodop 实现局域网打印的必要步骤之一。Ip 与客户端（H5之类的）的打印的指定打印机，可以通过2个字段，mobilePrinter ，ip 之类的让后端维护在数据库。获取 LODOP 进行打印。LODOP.ADD_PRINT_TEXT(5,49,151,30,"打印测试");// 其他自定义需求。

2024-06-05 14:34:04 826

原创物理主外键与逻辑外键

数据库设计知识通过在应用程序层面管理外键约束，可以获得更大的灵活性和性能优势，特别是在需要支持多数据库、分布式系统或复杂业务逻辑的情况下。使用 Java 的 ORM 框架和事务管理，可以有效地实现逻辑外键约束，确保数据的完整性和一致性。

2024-05-31 09:06:04 1362

原创 fulfillment+selling

跨境电商概念。

2024-05-30 18:02:44 542

原创局域网，广域网，WLAN，WiFi，互联网（Internet）

网络知识介绍这些网络概念形成了一个层次分明、互相依赖的网络生态系统，共同支撑着我们日常的信息交流和数据传输。

2024-05-29 10:49:43 1041

原创常见关系型数据库

这些数据库各有特色，适用于不同的应用场景，开发者和组织可以根据自己的需求（如性能、成本、兼容性、技术支持、社区活跃度等）来选择合适的关系型数据库管理系统。

2024-05-28 11:06:04 561

原创 ACL（Access Control List，访问控制列表）

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考首先，你需要定义你的权限模型，包括资源（Resource）、权限（Permission）、角色（Role，可选）和用户（User）等基本元素。// 如 "read", "write", "execute"// 资源唯一标识，如文件路径、URL等认识权限控制中的ACL，以及java实现的大概思路。

2024-05-27 16:20:02 860