我愿化作繁星

原创 模块化、类型安全与高性能：amapui 地图组件的设计之道

amapui 是一个基于高德地图 JS API v2.0 封装的 Vue3 组件，提供模块化地图功能。主要特点包括：1）模块化架构设计，将功能拆分为独立模块（Marker、Polyline等）；2）TypeScript 开发确保类型安全；3）高效的模块加载与缓存机制；4）支持地理编码、坐标转换、标记点管理等丰富功能。组件采用 Vue3 Composition API，支持响应式数据绑定，易于集成到现代 Vue 项目中。通过 npm 安装后，可快速配置地图参数和功能模块，满足多样化业务场景需求。

原创 vue3+ts项目中.env配置环境变量与情景配置

就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。

原创 vue3项目图片压缩+rem+自动重启等plugin使用与打包配置

不作为软件包的一部分来安装。您必须手动安装它们并将其添加为开发依赖项。这是一个设计决策，所以如果您只想使用。图片都需要写一次相对路径，并且对。图片进行压缩优化也不够方便。一个支持将你的样式表中的。文件内部的代码进行转换。资产，则可以选择跳过安装。图片的话，和图片压缩。

原创 vue3+ts项目中router+pinia+scss+unocss+跨域配置

❗️❗️❗️❗️本文是根据B站作者视频以及稍作整理💖💖作者B站地址💖💖视频教程地址💖💖作者微信：专注前端技术分享,技术讨论加。

原创 vue3项目中prettier+stylelint+husky+Lint-staged+Commitlint配置

https://www.npmjs.com/package/eslint-import-resolver-typescript 解决@别名识别问题。eslint https://eslint.nodejs.cn/docs/latest/use/getting-started 代码质量检查工具。prettier https://www.prettier.cn/docs/index.html 代码风格格式化工具。: 一款工程性更强，轻量级，高度自定义，标准输出格式的。整合实现生成规范化且高度自定义的。

原创 ✨✨使用vue3打造一个el-form表单及高德地图的关联组件实例✨

💖示例图1：💖💖💖示例图2：💖💖💖💖示例图3：💖

原创 编写h5页面如何调试微信环境

原创 前端设计模式详解

设计模式是针对特定上下文的常见问题的可重用解决方案。在前端开发中，它们帮助我们构建可维护、可扩展、可重用的代码。

原创 minimist详解

minimist是 Node.js 生态中一个。它的设计哲学如其名字一样——“极简”（minimalist），核心目标是以最小的成本，将命令行输入的复杂字符串转换为一个结构化的 JavaScript 对象，方便程序使用。

原创 我的创作纪念日

写作，是技术人最好的自我投资。它不仅仅是输出，更是最深度的学习；它记录的不只是代码，更是我们成长的足迹。最后，借用一句我很喜欢的话与诸位共勉：“种一棵树最好的时间是十年前，其次是现在。” 如果你也有分享的念头，不妨就从今天开始。你们的每一次互动，都是我前行路上最温暖的陪伴。未来的路，让我们继续以代码为舟，以分享为帆，在技术的海洋里，共同远航。—— 一名仍在路上的前端程序员2025年11月26日。

原创 删除node_modules太慢了，几个方法轻松删除node_modules

删除目录慢的常见原因是该目录包含（通常几万到几十万个），直接使用系统命令删除效率较低。

原创 智能头盔实时监控系统设计与实现

智能头盔实时监控系统是基于Vue 3和TypeScript开发的一套用于远程监控和控制智能头盔设备的前端应用模块。该系统通过WebSocket与后端服务器建立实时通信，实现管理员身份验证、设备状态获取、视频流实时播放以及远程操作控制等核心功能。智能头盔实时监控系统是一套功能完善的前端应用模块，通过Vue 3、TypeScript和WebSocket等现代Web技术，实现了与智能头盔设备的实时通信和控制。该系统具有良好的架构设计、稳定的通信机制和友好的用户界面，适用于多种远程监控和操作场景。

原创 高德地图卡片地图内部卡片地址比较说明

【代码】高德地图卡片地图内部卡片地址比较说明。

原创 git忽略校验，强制提交

【代码】git忽略校验，强制提交。

原创 git提交信息错误，如何修改远程git提交的备注信息

有时候我们在git提交时没有按照规范提交。此时就需要修改远程git提交的备注信息。

原创 elementUI中MessageBox.confirm()默认不聚焦问题处理

出现了默认不聚焦的问题，默认确认按钮是浅色的，需要点击一下才会变成正常。面对这种问题，创建新组件，实现聚焦。

原创 elementUI使用render函数封装公共分页组件

使用。

原创 解决el-radio-group中的area-hidden报错

)})<template>-- 选项 -->

原创 如何使用Tailwind CSS创建一个组合了很多样式的类名，实现样式复用

* src/main.css 或全局 CSS 文件 *//* 组合多个 tailwind 类 *//* 带响应式的组合 */rounded-md<style>解决方法检查的content配置是否包含组件路径。

原创 tailwindcss如何修改elementplus的内部样式

中禁用 Tailwind 的预检样式（Preflight），避免与 Element Plus 冲突。使用 Element Plus 的官方主题工具生成自定义样式文件，再通过 Tailwind 引入。Element Plus 的样式基于 CSS 变量，可以直接覆盖这些变量实现全局修改。在 Vue 单文件组件中，使用。增强特定组件的样式。

原创 nuxt中 网站文章咨询列表页和详情页适合做SSG吗

取决于内容的更新频率、数据量和业务需求。无论文章数量多少，静态生成详情页能最大化性能和 SEO 效果。在 Nuxt.js 中，文章资讯的。

原创 nuxt项目 详情页有阅读次数需要更新，有热门推荐列表需要更新适合做SSG吗

此方案在保留 SSG 的 SEO 和性能优势的同时，通过动态请求满足实时性需求，适用于大多数内容型网站（如博客、新闻站）。，仍可保留 SSG 的性能和 SEO 优势，同时支持动态功能。在 Nuxt.js 项目中，如果详情页需要实时更新。

原创 nuxt中 网站文章咨询列表页和详情页适合做SSG吗

取决于内容的更新频率、数据量和业务需求。无论文章数量多少，静态生成详情页能最大化性能和 SEO 效果。在 Nuxt.js 中，文章资讯的。

原创 vue render函数开发高阶组件（HOC）

【代码】vue render函数开发高阶组件（HOC）

原创 深入了解render函数：举例说明render函数可以实现而模板实现不了的示例

前几篇博客已经了解模板语法和render函数的区别。现在需要具体的例子来展示render函数独有的能力。一、首先，我需要回忆Vue中模板的限制。模板语法虽然方便，但在某些动态场景下不够灵活。例如，当需要根据运行时条件动态生成不同的组件结构时，模板可能无法简洁表达，而render函数可以用JavaScript的全部能力处理。三、然后，我需要验证这些例子是否确实无法用模板实现，或者模板实现起来非常笨拙。

原创 详细解释javascript的GO对象和AO对象

GO 是全局执行上下文的变量对象，代表全局作用域。在浏览器环境中，GO 是window对象；在 Node.js 中是global对象。所有全局变量、函数声明都会绑定到 GO 上。AO 是函数执行上下文的变量对象，代表函数作用域。在函数调用时创建，用于存储函数参数、局部变量和内部声明的函数。

原创 let const var 底层区域别，es6还有AO 对象和GO对象吗

var的底层行为存储在变量环境（类似 AO/GO），存在变量提升，无块级作用域。letconst的底层行为存储在词法环境，有块级作用域和 TDZ。ES6 的环境模型词法环境和变量环境共同管理作用域，取代了单一的 AO/GO。全局对象（GO）仍然存在，但仅var会绑定到它，letconst通过词法环境隔离。

原创 es6什么是暂时性死区，为何会存在

暂时性死区是指：在代码块（{}）内，从作用域开始到变量声明语句执行之前的区域。在这段区域内，如果用let或const声明的变量尚未被初始化，访问它会直接抛出。变量只有在声明语句执行后才能被安全使用。特性varlet/const（含 TDZ）变量提升提升并初始化提升但不初始化（TDZ）作用域函数/全局作用域块级作用域代码可预测性低（容易意外覆盖）高（强制先声明后使用）错误提示静默失败（undefined）直接报错（ReferenceError）TDZ 的核心目的。

原创 使用 Vue Render 函数开发动态组件库的完整示例

/ 处理自定义类型})

原创 vue2自定义指令实现 el-input 输入数字，小数点两位 最高10位，不满足则截取符合规则的值作为新值

/ 处理输入值，确保符合规则// 过滤非数字和小数点// 处理多个小数点，保留第一个== -1) {// 分割整数和小数部分// 整数最多10位// 小数最多两位// 处理以小数点开头的情况（如 ".98" → "0.98"）// 组合结果// 注册自定义指令if (!// 标记是否在输入法组合中// 触发更新// 输入法处理handler(e);// 保存处理函数以便解绑// 初始值处理.value??

原创 vue2处理接口异常或返回空数据的情况。避免接口报错导致页面调 error页面

在 Vue2 中处理接口异常或返回空数据时，可以通过以下方案实现。

原创 Vue 中模板语法与 Render 函数的详细对比说明

通过理解这些差异和适用场景，开发者可以更精准地选择适合项目需求的开发方式。模板语法提供简洁高效的标准开发流程，而 Render 函数则为复杂场景和性能优化提供终极解决方案。

原创 Vue3 虚拟 DOM diff 算法的源码解析

【代码】Vue3 虚拟 DOM diff 算法的源码解析。

原创 vue3 watchEffect源码解读

的核心原理是通过类来管理副作用函数和依赖关系。在副作用函数执行过程中，自动收集所使用的响应式数据作为依赖。当这些依赖发生变化时，调度函数会被触发，重新执行副作用函数。同时，提供了清理机制，用于处理副作用函数重新执行或停止时的清理工作。

原创 vue3 watch源码解读

jobscheduler根据flush} else {if (!} else {job()Vue 3 的watch源码通过对不同类型的source进行解析，结合effect函数和调度器实现了数据的监听和回调执行。解析source生成getter函数。处理deep选项。定义job函数和调度器。创建副作用函数runner。根据选项决定是否立即执行。返回停止监听的函数。通过这种方式，watch可以灵活地监听不同类型的数据变化，并在合适的时机执行回调函数。

原创 vue计算属性源码解读

在Vue实例初始化时，为每个计算属性创建一个Watcher实例，并将其标记为懒执行。当访问计算属性时，触发计算属性的getter函数，调用Watcher的evaluate方法计算计算属性的值，并进行依赖收集。计算结果会被缓存起来，只有当依赖数据发生变化时，Watcher的dirty标记会被设置为true，表示需要重新计算。这样，Vue就实现了计算属性的缓存和自动更新功能。

原创 vue3自定义指令

在组件内部使用directives选项来注册局部自定义指令。<template>// 局部自定义指令// 指令钩子函数，在元素挂载后执行// 让元素获取焦点el.focus()</script>在上述代码中，定义了一个名为v-focus的局部自定义指令，当绑定该指令的元素挂载到 DOM 后，会自动获取焦点。在应用实例中使用方法来注册全局自定义指令，这样在整个应用中都可以使用该指令。// 全局自定义指令el.focus()})在main.js中注册了全局的v-focus。

原创 在 Vue 3 的 Composition API 中，如何实现动态组件

在 Vue 3 的 Composition API 中，实现动态组件主要借助标签结合:is动态绑定属性，同时搭配响应式数据来控制显示不同的组件。以下将从基础实现、加载异步组件以及组件缓存三个方面详细介绍实现动态组件的方法。

原创 在 Vue 3 中，如何缓存和复用动态组件

在 Vue 3 中，如何缓存和复用动态组件，这有助于提高应用的性能，避免组件重复创建和销毁带来的开销。下面详细介绍其使用方法和相关配置。

原创 Vue 异步组件的加载策略

按需加载是最常见的异步组件加载策略，即只有当组件需要被渲染时才进行加载。这种策略能有效减少初始加载的代码量，提高应用的首屏加载速度。在 Vue Router 中，异步组件常用于实现基于路由的代码分割，即只有当用户访问特定路由时才加载对应的组件。预加载策略是在组件实际需要渲染之前就提前加载组件，这样当需要使用组件时可以立即渲染，减少用户等待时间。分组加载策略是将多个相关的异步组件放在一组进行加载，适用于需要同时使用多个组件的场景。同时加载多个异步组件，当需要显示这些组件时，可以更快地渲染。