vue日常开发

背景 本地在开发Vite+Vue项目时，需要让团队成员实时访问验证开发的功能。通过花生壳进行内网穿透，将本地运行的项目暴露至公网，让其他成员通过公网地址访问。 很实用的一个开发调试技巧。 不仅仅是前端

背景 在 Vue 项目中，渲染一个包含 10000+ 节点 的树形结构（树形选择器）时，如果直接将接口返回的数据交给响应式系统，性能会明显下降。 当数据层级很深、字段很多时，Vue 会对整棵树进行深度

在使用 Element-Plus/Element-UI 的分页表格（或者其他表格组件）时，默认的多选功能无法跨页保持选中状态。当切换分页请求新数据后，之前选中的数据会被清空。

在前端开发中，搜索框的实时搜索功能是一个常见场景。用户输入文字时，每输入一个字符就发起搜索请求。但这里存在一个潜在的竞态问题：如果后发起的请求比先发起的请求更快返回，可能会导致错误的搜索结果显示。 防

移动端适配方案 移动端适配最常用的方案就是使用rem。 下面介绍经过配置，我们只需要按照设计稿（例如750px宽度的页面）的px正常开发。通过postcss-px2rem自动帮我们转换成rem。完全不

背景 使用nginx部署web项目，调整nginx的配置进行性能优化。 GZIP 压缩：压缩响应数据，减少文件大小，提升传输效率。 强缓存：通过缓存策略减少重复请求，减轻服务器负担，提升响应速度。 H

背景 领导要求后台管理系统实现tabs标签页功能，每个页面打开后需显示标签并缓存页面。 使用Pinia定义一个tagStore保存路由路径，并结合keepalive实现缓存。 但是遇上了缓存的页面组件

背景 在实际开发中，封装组件是一个常见需求，尤其是在处理灵活配置的场景时。比如，一个通用表单组件需要支持动态配置表单项，并需要配置配置数据引入不同类型组件，包括自定义组件。这样的需求需要设计低耦合、高

背景 使用 patch-package 修改npm包uview-plus 的 index.js 希望禁用在 H5 环境下会加载所有组件的一段代码。 修改前： 修改后： patch-package 介绍

背景 vite项目，前端配置了自动化部署，每次git push就会自动打包。但是想知道是否打包成功，耗时多久。 插件代码 /src/plugin/build_version/ts 效果

需求 需要打印表格，UI组件库的表格如果用原生的打印会出现样式显示不全的问题。边框也会不见。 网上找到个方法 使用html2canvas把表格转成长图然后使用print-js打印。 虽然html2ca

需求 有很多功能模块。用户等级不同可以使用的功能也不一样。但是所有模块的页面必须全部显示。 只有点击的时候如果没这个功能的权益才提示去够买。并且拦截掉原先按钮的点击事件。 形如： 思路： 思路1： 在

前言 在现代前端开发中，表单是几乎每个项目都会涉及的功能模块。然而，传统的表单组件往往代码冗长、逻辑复杂，难以维护和扩展。因此，我们设计并封装了一个高效灵活的表单组件——Cform，旨在简化表单的使用

在实际项目中，由于业务复杂性，组件不可封装得过于死板，因为个性化修改需求一直存在。但我们希望尽可能减少基础代码的编写，通过配置数据的方式使用组件，并且保留组件的灵活性。 本文的表格将仿照naiveUi

背景 修改公司后台管理系统（简称系统A）的 一个页面的文字，然后发现需要等待5-7秒才会热更新到页面。 刚开始怀疑是vite的问题。看完了整个vite的官方文档和热更新相关的issue。无果。 谷歌搜

背景 本地开发时候总会遇上接口跨域问题，不可能每次都让后端设置接触跨域限制，因为后端也会有安全性的考量。 那么就只有在本地搭建proxy服务实现请求转发了。不然本地开发没办法调试接口。

用的组件库没有单独的overlay遮罩层组件，所以自己写了一个，备份下~~~~~~~~~~~~~~~

typescript 枚举利用jsdoc查看每个枚举注释typescript 枚举利用jsdoc查看每个枚举注释

实现文本溢出的展开收起功能，纯 CSS 方案在网页中可行，但在小程序中存在兼容性问题。 最优的解决方案就是使用 JavaScript 的二分截断法。 通过研究 vant 的 TextEllipsis

背景 为了项目方便的下载文件，封装下载文件指令。使用时只需要： 指令源码存放到src/directives/down.ts 全局注册 在sfc模板使用 在编写渲染函数的场景结合h和withDirect