- 博客(94)
- 收藏
- 关注
RSS订阅
原创 Cursor Rules使用全攻略：让项目代码更智能、更高效
在Cursor v0.46版本中，Rules在Settings被单独拎出来作为一个分类，足以看出Rules在Cursor中的重要性。Rules之所以这么重要，是因为它能让我们更精准地控制项目代码往我们想要的方向去生成，这是和“AI幻觉”做对抗的有效手段之一。在Cursor中，目前有三种层级的Rules，分别是User Rules、.cursorrules以及Projecet Rules。。
2025-03-31 11:08:19
9535
原创 Uniapp 安装安卓、IOS模拟器并调试
首先下载 Mac 环境下的 Android Studio 的安装包，为dmg 格式。下载完将Android Studio 向右拖拽到Applications中，接下来等待安装完成就OK啦！打开过程界面如下图所示，若未配置 SDK 目录，会出现找不到 SDK ，选择取消即可打开 Android Studio 启动向导，一直选择下一步这里可以选择标准启动设置，也可以进行自定义，这边我选择了标准选择需要安装的配件，建议勾选以下选项，这些也可以在之后进行安装。
2024-11-27 14:17:01
4412
原创 由浅入深package.json，发布一个优秀的npm包
整篇文章大概会涉及到以下内容：package.json 中一些常用重要字段用途讲解，比如sideEffects、publishConfig、exports等;以及如何发布一个优秀的npm包
2024-08-26 16:40:15
2066
原创 富文本编辑器 从 Prosemirror 再到 Tiptap
笔者在日常的需求迭代中，已经在编辑器集成了AI写作、AI绘画等AIGC相关功能以及一些通用编辑功能。并且对该编辑器的灵活性、可扩展性、文档规范性等方面给予了很高的认可。通过使用Tiptap编辑器的扩展继承、自定义扩展等功能，可以让我们构建出更为更为丰富的富文本编辑器。Tiptap富文本编辑器的功能远不止这些，还有很多编辑器的方法没有介绍。不过笔者希望通过此篇文章可以帮助你更好的认识Prosemirror 和 Tiptap富文本编辑器。
2024-08-01 16:37:51
4194
原创 大三实训，我用Nodejs和Vue3以及Typescript做了一个关于医院的后台管理系统 ❥(^_-)
已经大概有一个多月没有写博客了，最近一直在准备考研，所以时间有些紧张，今天特意拿出一下午时间来回忆回忆前端知识。今天就拿我在6月份所实训的后台管理项目来说一说。毕竟离上次写前端代码已经有很长时间了，有点想念啊~~~哈哈哈。还请各位允许我在这里吹个小小的牛逼，毕竟这是我人生中的第一个小小的全栈小项目。废话不多说——始于前端，而不局限于前端，开搞！项目：医院CMS（前后端分离）项目简述：此项目为我的一个实训项目，是关于医院的一个后台管理系统，当时实训老师用到的后端技术是Java、JDBC、jsp、ser
2021-08-13 18:27:34
5562
35
原创 Function Call 和 MCP 的区别（举例子，一文说明白）
本文将通过Nodejs+LangChain举例的方式来讲解：Function Call = 模型请求你，你再帮它调工具；MCP = 模型自己调工具，你只提供工具
2026-01-28 14:45:16
270
原创 案例+图解带你遨游 Canvas 2D绘图 Fabric.js（5W+字）
本文主要讲解Fabric.js，包括画布的基本操作、基础图形绘制方法、自定义图形、文本和文本框、图形和文本的基础样式、渐变、选中状态、分组和取消分、动画、设置和获取图形层级、基础事件、缩放和平移画布等
2026-01-16 17:18:27
82
原创 Vite+ElementPlus 自动按需加载与主题定制原理全解析
一文带你了解 Vite+ElementPlus 自动按需加载与主题定制原理全解析，从会配置到深入其内部机制。
2025-11-25 14:32:12
513
原创 React 有 useAntdTable，Vue3 怎么办？自封一个 useTable！
Vue3+ElementPlus版的useTable，负责统一管理表格的数据请求、分页、搜索、loading、刷新等逻辑。👉 组件只负责展示，逻辑都集中在 hook 中。高内聚低耦合，统一行为。
2025-11-24 16:25:49
739
原创 一文读懂 Uniapp 小程序登录流程
通过5个标准步骤实现微信登录，包括获取code、服务器认证和生成token 前端实现： 使用UniApp+Vue3开发登录页面 通过uni.login()获取code并发送到后端 处理登录结果并存储token 后端开发： 使用Node.js+Express搭建服务 实现与微信API交互换取openid 生成JWT token返回给客户端 持久化登录：通过本地存储token实现下次自动登录 该方案涵盖了小程序登录的全流程实现，包括
2025-11-18 11:04:06
630
1
原创 详解ECharts中的convertToPixel和convertFromPixel
ECharts提供了convertToPixel和convertFromPixel这对关键方法，用于在数据坐标与像素坐标之间进行转换。数据坐标是图表内部的逻辑值，像素坐标是屏幕上的实际位置。convertToPixel将数据值转换为像素位置，常用于绘制自定义图形和辅助线；convertFromPixel则反向将点击的像素位置转换为数据坐标，用于获取用户交互的数据索引。这对方法在图表联动、自定义标记和交互功能中发挥重要作用，通过数据与像素的双向转换实现精确的图表操作。
2025-11-03 09:45:42
669
原创 ECharts 全局触发click点击事件（柱状图、折线图增大点击范围）
摘要 本文介绍了实现Echarts图表联动点击事件的解决方案。针对柱状图和折线图的特殊需求：支持点击背景区域和坐标点附近区间触发事件，并保留选中竖线。通过chartInstance.getZr().on监听全局点击事件，结合convertFromPixel方法获取精确的数据索引。对于选中态处理，使用echarts.graphic.Line绘制永久虚线，并通过ZRender底层API控制显示层级和位置。方案包含完整的代码实现，解决了原生事件API的局限性，实现了精准的数据索引获取和美观的选中状态展示。
2025-10-28 09:54:47
641
原创 前端数据可视化：基于Vue3封装 ECharts 的最佳实践
本文介绍了一个基于 Vue 3 和 ECharts 的可复用图表组件，支持动态配置、自动调整大小、加载状态和空数据提示等功能。组件通过 option 属性传入 ECharts 配置项，支持动态数据更新和尺寸自适应，并提供图表事件绑定、主题切换和渲染器选择等扩展功能。核心代码实现包括图表初始化、配置更新、大小调整和生命周期管理，通过 Vue 3 的组合式 API 和 ResizeObserver 实现响应式布局。组件还支持加载状态显示和空数据提示，并对外暴露 ECharts 实例以实现更灵活的操作。
2025-09-01 14:44:52
497
原创 分不清RAG 、Function Call、MCP、Agent？一文秒懂它们的区别和联系
大语言模型（LLM）存在知识截止性、无法操作现实世界和短期记忆有限三大缺陷。四大技术可有效补足这些短板： Agent（智能体）：作为决策中枢，自主规划任务并调用工具执行，如规划行程、订票等。 RAG（检索增强生成）：通过检索外部知识库增强回答准确性，解决知识过时问题。 Function Call（函数调用）：让LLM请求执行外部工具（如API），实现实时操作（查天气、订票等）。 MCP（模型上下文协议）：标准化AI与外部工具的通信协议，实现即插即用，支持跨模型工具调用。 协同场景：Agent协调RAG查景点
2025-08-11 15:48:00
913
原创 MultiRepo 和 Monorepo：代码管理的演进与选择
Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。Monorepo 提倡了开放、透明、共享的组织文化。
2025-08-04 15:55:44
946
原创 Vite 环境变量配置
本文介绍了Vite环境变量的基础概念和使用方法。主要内容包括：1) Vite自带的环境变量(如MODE、BASE_URL等)及其用途；2) 默认的开发和生产两种环境；3) 环境变量定义方式(.env文件)及其优先级规则；4) 基本使用方法，包括前缀VITE_的变量定义、TS类型声明和项目调用；5) 进阶用法，如多环境配置(测试环境)和修改.env文件存放位置。通过envDir配置可以将环境变量文件统一存放在指定文件夹，保持项目结构整洁。
2025-06-19 09:37:21
795
原创 Cursor生成的UI太丑？如何减少UI拉扯？
如果你想模仿竞品增加一些页面和功能，最快捷的方法就是把参考图丢给cursor，并具体描述你想参考的方向。
2025-03-27 10:49:04
900
原创 ChatGPT 提示词（Prompt）使用技巧：提升 AI 对话效率的秘诀
ChatGPT 提示词（Prompt）使用技巧：提升 AI 对话效率的秘诀
2025-03-10 15:01:58
980
原创 前端无感刷新token机制（一文说明白）
用户登录成功之后，两个 token（一个 access_token、一个 refresh_token），访问接口时携带 access_token 访问，当 access_token 过期时，通过 refresh_token 来刷新，拿到新的 access_token 和 refresh_token。而 access_token 一般过期时间设置的比较短，比如 30 分钟，refresh_token 设置的过期时间比较长，比如 7 天。这样，只要你 7 天内访问一次，就能刷新 token，再续 7 天，一
2024-10-08 09:48:40
2341
原创 从生成器函数Generator出发，聊聊Async await
整篇文章大概会涉及到以下内容： 生成器函数的概念、使用、详解等。 生成器函数如何像async await一样处理异步。
2024-09-09 14:29:52
1168
原创 深入React中的state，不要再说setState是同步异步了
React中组件自身的state改变或者父组件props改变都会造成视图层面的更新。React中setState的"同步和异步"本质上就是状态单个/批量执行，和js中的同步异步是完全没有关系的。
2024-08-19 10:43:19
923
原创 浅谈 React组件设计之受控和非受控组件
在开发一个React组件时，可以创建一个灵活的组件，能够在受控和非受控两种模式下工作。这样可以在不同的使用场景中提供更大的灵活性。理解受控和非受控组件的区别有助于你在设计和使用 React 组件时做出更好的选择。希望这些示例和解释对你有所帮助！
2024-08-13 14:25:42
850
原创 微前端场景下如何做样式隔离？
样式隔离实现起来不复杂，各种方案都有其局限性。目前比较稳定的方案还是使用 css Modules 之类的工具配合团队之间协商好样式前缀，从样式命名和优先级上解决问题。主应用的样式依然可以影响到子应用，优先级也可能会被 !important 等操作被破坏，不过大多数场景下足够了
2024-08-06 10:30:13
1562
原创 聊一聊 webpack5性能优化有哪些？
webpack性能优化较多，可以对其进行分类大多数情况下，我们会更侧重于优化打包后的结果，这对于线上产品的影响更大。
2024-07-30 09:45:22
1749
原创 ⚡️ 聊一聊Nextjs的渲染策略，以及如何选择合适的渲染策略
SSR：Server-Side Rendering，服务器端渲染；SSG ：Server-Static Generation，服务端静态生成，也叫编译生成ISR ：Incremental Static Regeneration 静态增量生成CSR：Client-Side Rendering，客户端渲染默认情况，Next.js 会预渲染每个页面。这意味着 Next.js 会将网站的所有页面提前生成静态 HTML 文件并保存下来。
2024-07-25 11:32:05
1187
原创 聊一聊前端动画的种类，以及动画的触发方式有哪些?
动画在前端开发中扮演着重要的角色。它不仅可以提升用户体验，还可以使界面更加生动和有趣。在这篇文章中，我们将深入探讨前端动画的各种实现方式，包括 CSS 动画、JavaScript 动画、SVG 动画等。我们还将讨论一些触发动画的方式和动画在用户体验中的最佳实践。
2024-07-22 17:48:13
1685
原创 聊一聊前后端权限控制 RBAC（完整流程）
前端需要把所需要的路由定义好，分为两部分：一部分是静态路由，可以随意访问；另一部分是权限路由，需要做权限控制。我们的页面结构通常是左侧有一个侧边栏，然后页面在中间的内容区域显示。所以这部分需要定义成嵌套路由。内容区为路由出口，React里边的，Vue中的；然后还可以把一些页面通过懒加载的方式引入。/*** 静态路由 可随意访问*/path: '/',name: '首页',title: '首页',},name: '登陆页',title: '登陆页',},
2024-07-15 10:18:17
2866
原创 前端用Canvas绘制一个高可配置的圆形进度条
绘制入口，用来调用绘制函数，绘制前需要清除画布，通过重新绘制来达到动画效果。然后根据条件值来决定是否渲染其它元素。因为深橘色圆环、小圆球、百分比文字是具有动画的，所以需要根据percent数值动态生成弧度值来绘制深橘色进度条（即）和小圆球，根据百分比来绘制百分比文字。// 绘制圆形进度条const {textFont,// 背景的圆环// 有色的圆环// 处理渐变色// 从-90度的地方开始画,把起始点改成数学里的12点方向},_endAngle。
2024-07-09 12:45:23
1348
原创 Nginx Http缓存的必要性！启发式缓存有什么弊端？
我们在使用React或者Vue开发项目中会使用hash、chunkhash、contenthash来给静态资源文件进行命名。这带来的好处便是当我们部署完项目后，用户刷新页面后会重新获取html资源，html资源中的js或者css文件由于文件名发生变化会重新发起请求来获取新的资源。当然我们有时候为了项目优化，我们还会对一些页面模块进行分包进行懒加载，有时候还会把一些模块通过webpack魔法注释chunkName拆到一个包中。http缓存种类：我目前总结了三类，分别为强缓存、协商缓存、启发式缓存。
2024-07-02 12:41:24
727
原创 webpack 之 splitChunks分包策略
将满足拆分规则的构建内容抽出来单独打包，从而达到抽离公共模块，减少重复打包的目的。中的配置项用来确定具体的拆分规则，其中的 cacheGroups 配置项必须同时满足其下的所有条件才能生效。// 生成的 chunk 的最小体积，单位为字节（bytes）。内容超过了minSize的值，才会进行打包// 在拆分之前，必须共享的模块的最小 chunk 数。// 在按需加载时，允许的最大并行请求数。// 入口点允许的最大并行请求数。
2024-06-27 16:27:07
3707
原创 AIGC 在前端流式获取内容SSE
在 OpenAI 的 API 中，SSE 通常用于实现实时数据传输。例如，在聊天模型（如 ChatGPT）中，使用 SSE 可以让客户端实时接收到生成的对话内容，而不需要等待整个响应完成。SSE即Server-Sent是HTML5提出一个标准。由客户端发起与服务器之间创建TCP连接，然后并维持这个连接，直到客户端或服务器中的任何一方断开。HTTP响应内容有一种特殊的，该响应头标识了响应内容为事件流，客户端不会关闭连接，而是等待服务端不断得发送响应结果。事件类型（可选）：指定事件的类型。
2024-06-25 17:00:53
1115
原创 前端的拖拽和缩放（缩放以鼠标为中心）
后，所有的位移和缩放都是基于左上角进行的，这使得计算变换的位移量更加直观和简单。只需要考虑从左上角开始的平移和缩放，而不需要考虑元素的中心点。例如，如果 scale 增加了10%，那么 scale / prevScale 会是1.1，减去1后得到0.1，表示增加的10%。这意味着需要手动计算缩放过程中元素的位移，以确保缩放是以鼠标为中心的。，在缩放和位移时需要考虑变换原点的位置，这会增加计算的复杂性。在缩放过程中需要计算新的平移值，使得缩放以鼠标为中心。，缩放和位移的计算将变得更加复杂。
2024-06-24 12:05:56
1448
原创 手撕Promise和Async await原理
Promise原理：const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';class MyPromise { status = PENDING; // 状态一经改变就不可变 value = null; reason = null; successCallback = null; failCallback = null; constru
2022-01-16 16:37:08
471
原创 手撕Vue2和Vue3响应式原理
object.defineProperty缺陷：1、通过数组下标添加元素，无法触发setter。2、监听数组的push,pop,shift,unshift,splice,sort,reverse方法或者改变length无法触发setter。—>重写数组方法3、无法检测到对象属性的新增或删除 —>Vue.$set4、不管data中的对象层级有多深，都需要遍历每个属性，为每一个属性添加object.defineProperty。—>性能问题Vue2响应式：// 获取数组的原型
2021-11-14 20:36:10
754
1
转载 关于Vue中main.js通常定义的东西、项目中的全局配置等等
main.js:// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.// import Vue from 'vue';// import App from './App';// import router from './router';// import Element
2021-09-10 11:55:02
884
原创 Vue3警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component
在Vue3中组件通信中（子传父）报出如下警告：[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a compon
2021-07-06 22:02:28
16922
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人