天渺(喵)工作室

《基于Vue自定义指令实现按钮权限控制的npm插件发布》 摘要：作者将之前关于Vue按钮权限拦截的文章内容封装为npm插件，解决了项目中按钮级权限控制的痛点。该插件通过Vue自定义指令实现，不依赖特定UI库，支持原生元素和各类组件库。核心设计是通过check函数判断权限，onDeny处理拒绝操作，支持函数和数组两种传参方式。插件兼容Vue2/Vue3，采用WeakMap存储监听函数确保内存安全，支持SSR环境，仅3KB大小且无依赖。现已发布至npm，包含完整单元测试，为前端项目提供轻量级的按钮权限控制方案。

Vite压缩插件 vite-plugin-pack-orchestrator 提供更强大的构建压缩功能。相比现有插件，它支持多种压缩格式（ZIP/TAR/TAR.GZ/7Z），自动生成文件校验（MD5/SHA1/SHA256），支持文件名模板占位符（版本号、时间戳、哈希值），并提供丰富的钩子函数（构建前后回调）。特别适合需要严格版本控制的发布场景，可自动生成带校验信息的压缩包，方便CI/CD流程集成。通过配置fileName占位符和onAfterBuild钩子，能灵活控制输出文件名格式，满足不同部署

基于Nuxt 3开发个人导航站的完整过程。作者放弃了使用WordPress的One Nav模板，选择自主开发以实现更轻量化和定制化的需求。技术栈采用Nuxt 3（SSG模式）、TypeScript、Tailwind CSS和Element Plus等现代前端技术。开发过程包括基础框架搭建、UI还原、功能完善和数据整理四个阶段，解决了图标加载、深色模式适配等关键技术问题。最终实现了一个支持桌面/移动双端、具备搜索功能和分类管理的导航站，包含200+个整理好的网站资源。项目已在GitHub/Gitee开源，并提

摘要： 在Vite+Vue3+Element Plus项目中，Chrome浏览器翻译功能导致表格数字ID被篡改（如10111872→10111873）。经排查，确认问题仅在特定设备触发，与接口数据、代码逻辑无关，根源是Chrome翻译对Element Plus表格的异常处理。通过为ID列添加HTML5的translate="no"属性临时解决，但遗留三个未解之谜：1）问题设备特异性；2）ID固定末尾+1的规律；3）是否属于Chrome或Element Plus的深层兼容性问题。该案例揭示

前端业务开发中不管使用vue2~3，还是react，angular各种前端技术栈，经常会遇到这种业务。一个下拉框Select中，不仅需要需要**支持远程模糊搜索，还需要支持多选。并且在编辑时，还能正常把已经多选好的内容回显到Select中。**#### 用Vue3+ElementPlus+TS举一个简单的案例。

Vue2和3中的插槽区别&插槽常用知识点温习和基本概念是一致的，也是匿名插槽、具名插槽、作用域插槽三种，只是基础语法有一些区别。下面让我们温习一下插槽的常用基础知识点。

vue3中Fragment特性的一个bug，需要留意的注意事项。vue3中的Fragment 模版碎片特性是什么，简单的理解就是不在像vue2中那样必须在根节点在包裹一层节点了。

Vue3中用自定义指令拦截点击事件,点击事件添加权限。某些应用场景会给点击事件添加权限，不存在权限就 拦截 点击事件（或触发其他业务事件），有权限就继续正常 触发 点击事件。如果用封装组件的方法，在使用三方UI库的情况下，封装成本过大，并不划算。

event.path参数被浏览器删除，如何一劳永逸的解决.event.path参最早从官方issue中可获知chromium内核团队早在21年就开始认为 Event.path 属于非标准 API,某些地方已经开始删除event.path数组参数了。2月初，Chrome(版本号109.0.5414.120)在一次升级中删除绑定点击等等部分事件中的Event.path数组参数，,将当前所有的冒泡一层一层 parentNode 元素收集起来。方法，但是根据网上的某些网友反馈也有可能返回空数组（暂未找到原因）。

To use this template, you must update following to modules: npm: should be >=

[vite] Internal server error:options.devServer.transformWidthEsBuild is not a function...

Vite配置如何优雅的code spliiting代码分割前端生态 rollup 和 webpack都有的概念。如果把所有代码都打包到一起，可能最终的代码非常大。从而影响加载时间。而且，很多代码是初始加载时，不需要的。因此，我们可以根据代码使用的紧急程度，将代码分割打包后，可以按需加载。.........

Vue3 teleport官方文档地址：Vue3中的teleport API极大方便了在Vue3业务逻辑中操作移动Dom位置。

Vue3中的Composables是什么Vue3中的Composables 简单理解其实就是类React Hooks式的组合式函数封装方法。Vue官方称为Composables 组合式函数。（1）Vue2 中的mixins混入器写法缺点 (Vue3 optionsApi写法同理)新建minxins.js文件 案例使用组件一个简单Vue2 (或Vue3optionsApi写法) minxins混入器案例很直观的看出 缺点:使用一个简单Vue3 composition API案例，写类Hook

TypeScript重载函数的作用案例C++中的一个概念(百度百科):函数重载一般指重载函数。 重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。这就是重载函数。简要总结就是函数的名称相同, 但是参数不同的几个函数, 就是函数的重载。1.Vue3 ref声明方法的源码中重载函数案例2.举一个应用场景中的案例缺点function ToAdd (a: s

vue3+vite打包以后，项目切换路由触发（偶发触发）报:After using vue-router, there is an error in packaging and running # Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts

vue3 template 部分 <el-date-picker v-model="value1" type="daterange" range-separator="To" :disabledDate="disabledDateFun" start-placeholder="Start date" end-placeholder="End date" />vue3 逻

Vue3 在采用 compositionAPI 时候,Vite编译报错:[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.我遇到的报错原因是因为

vue3在新建工程的时候 报错 Unsupported URL Type "npm:": npm:vue-loader@^16.0.0-beta.7找了很多原因 最终发现 很多情况都是因为vue3的部分配置依赖需要npm高版本，最好直接升级6以上更新npm至最新的稳定版本npm install npm@latest -g或者npm install -g npm...

vue3项目启动的时候 遇到类似情况pm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 http://go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。最简单 也是最不影响其他环境的访问直接删除D:\nodejs\npm.ps1 改文件就OK...