Jinxiansen0211的博客

原创 Windows 前端开发环境一键启动 （NVM + Yarn）

本文介绍了一套完整的Windows前端开发环境一键启动方案，通过NVM+Yarn实现多项目高效管理。主要内容包括：1) 解决Node版本切换、端口冲突、中文乱码等常见痛点；2) 提供单项目/多项目启动脚本模板；3) 详细的操作步骤和问题排查指南；4) 可选的后台静默启动方案。该方案特别适用于团队标准化开发环境配置和新员工培训，包含完整的脚本模板和配置示例，确保"双击一键启动所有项目+多窗口并行运行+完美中文支持"的效果。文档可直接用于公司知识库和开发规范文档。

原创 uni-app 自定义路由封装模块详解（附源码逐行解读）

💡统一跳转 API：支持 navigateTo、switchTab、reLaunch 等🔒导航守卫机制：登录拦截与后置回调🔄query/params 分离处理🧩模块化配置，支持挂载 ctx你可以在此基础上继续拓展如：权限校验、页面缓存、历史记录管理、动画过渡管理等功能。

原创 Nuxt + Pinia + Element Plus 后台管理系统搭建教程（含源码）

技术栈作用Nuxt 3页面结构 + SSR + 中间件Pinia用户登录信息和状态管理后台页面 UI 构建Middleware登录校验、权限控制。

原创 Vue 3 实战：【加强版】公司通知推送（WebSocket + token 校验 + 心跳机制）

模块功能说明✅ token 鉴权前端通过 URL 携带 token，验证身份✅ 心跳机制每 30 秒 ping-pong 检测连接活跃状态✅ 自动重连断网后 3 秒自动重连，稳定持续连接✅ 消息缓存保存所有历史通知消息✅ 可扩展封装抽离为通用组件。

原创 Vite 插件使用全攻略（含自动导入）

这篇文章详细介绍了Vite插件的使用方法和推荐配置。主要内容包括：1) 插件的作用，如自动导入、路径别名、Mock数据等；2) 7个常用插件的具体配置方法，包括自动导入API/组件、路径别名、Mock接口、压缩构建产物等；3) Vue项目的推荐插件组合；4) 强调插件对提升开发效率的重要性。文章提供了完整的代码示例，帮助开发者快速搭建现代化的Vite开发环境，适合Vue 3+Vite项目参考使用。

原创 Vue 3 + WebSocket 实战：公司通知实时推送功能详解

本文详细介绍了如何使用Vue 3和WebSocket实现企业级实时通知推送功能。主要内容包括：1) 封装通用的useWebSocket可复用逻辑，实现自动连接、断线重连和消息管理；2) 在Vue组件中集成WebSocket监听，实时展示接收到的通知；3) 对比WebSocket与轮询的优势，强调秒级响应特性；4) 提供消息格式建议和UI提示集成方案。文章还总结了实现的关键步骤，并建议配合心跳机制和token校验增强安全性。该方案结构清晰、代码实用，适用于需要实时推送的企业系统开发场景。

原创 Vue 组件库发布实战（含 TypeScript 支持）

步骤内容1️⃣初始化 TS + Vite 项目2️⃣编写 Vue 3 组件结构，支持多组件3️⃣配置 Vite 构建和类型输出4️⃣设置，准备发布5️⃣构建并发布到 npm6️⃣在其他项目中测试使用7️⃣持续维护和扩展版本👏 这样一个支持 TypeScript 的 Vue 组件库就发布完成啦！可以无限扩展和维护。

原创 从零发布一个 Vue 3 Button 组件到 npm（基于 Vite）

步骤操作1️⃣创建项目并初始化2️⃣编写Button.vue组件3️⃣配置构建工具4️⃣编辑构建脚本和发布信息5️⃣登录并发布到 npm6️⃣测试在其他项目中安装使用7️⃣更新版本并发布👏 到这里，你就完成了从 0 到发布 Vue 组件到 npm 的完整流程！是不是很简单？如果你还想继续发布更多组件，甚至封装成一个组件库，也可以按照这个流程反复使用！📮有问题欢迎评论提问，我会尽量解答！

原创 Vue + Element Plus 实战：大文件切片上传 + 断点续传

功能实现点切片上传分片，前端循环上传秒传前端计算 hash，服务端校验是否上传过断点续传获取已上传列表，跳过上传合并通知上传完毕后请求服务端合并接口UI 展示Element Plus 上传组件 + 进度条反馈。

原创 Vue 3 弹出式计算器组件（源码 + 教程）

Vue 3 弹出式计算器组件摘要 该教程提供了一个完整的Vue 3计算器组件实现，包含以下核心功能： 交互功能：支持加减乘除、正负切换、百分比运算 UI特性：点击输入框右侧🧮图标弹出计算器，支持点击外部或ESC键关闭 数据绑定：实现与父组件的双向数据绑定(v-model) 计算展示：实时显示计算过程和当前数值 代码结构：采用Composition API编写，包含完整的生命周期管理和事件监听 源码可直接复制使用，教程按功能模块分解讲解，适合需要表单辅助计算功能的项目。组件支持响应式布局和自定义样式，建议收

原创 UniApp 全生命周期钩子详解

钩子场景应用示例onLaunch初始化全局状态、获取设备信息onShow页面/应用从后台回到前台时刷新数据onHide页面/应用切换或关闭时保存数据onUnload页面销毁时清理定时器分页加载、数据追加刷新内容数据onError统一错误处理，提升稳定性增强用户分享体验📌UniApp 的生命周期钩子 = Vue 生命周期 + 小程序生命周期 + 应用生命周期掌握这些钩子，就像掌握了页面和应用行为的“遥控器”🔧。合理使用生命周期钩子，不仅能让你的页面逻辑更清晰，还能显著提升用户体验和程序性能。

原创 用uniapp开发微信小程序：文件下载+预览神器，代码给你，解释随便看！

Hey，小伙伴们！今天给你们带来一个超实用的小功能——在微信小程序里用uniapp实现文件下载和预览！代码已经帮你写好了，直接拿去用！先放上完整代码，别眨眼，后面还有逗你玩的解释哦～❤️。

原创 在 Windows 中通过注册表添加右键菜单 “使用 VS Code 打开“

本教程详细介绍了如何在 Windows 系统中通过注册表编辑器为文件夹和文件添加“使用 VS Code 打开”的右键菜单选项。首先，通过 Win + R 打开注册表编辑器并定位到 HKEY_CLASSES_ROOT\Directory\shell 路径。接着，创建名为 Open with VS Code 的主菜单项，并设置其默认值和图标路径。然后，添加 command 子项并配置其命令为 VS Code 的可执行文件路径。最后，测试效果并可选地为文件添加相同的右键菜单。操作完成后，用户可方便地通过右键菜单使

原创 Node.js 和 Vite 中常用的 process、__dirname、路径处理技巧汇总

本文档总结了在 Node.js（包括 Vite 配置中）常用的 对象属性和方法， 与 的区别，以及在 Vite 中一些实用的路径处理方式。2. 访问环境变量，配合 文件使用3. 获取命令行参数，适用于 CLI 工具或自定义构建脚本4. 退出当前进程（code 为 0 表示正常退出，非 0 表示异常）5. 获取运行平台（如 , , ）6. / 控制输出7. 获取进程已运行的时间（单位：秒）8. 获取当前内存使用情况（单位：字节）

原创 Element Plus SCSS 变量覆盖指南（基于 Vite + Vue 3）

使用时，如果你想通过本地文件覆盖默认主题变量（如颜色、圆角、字体大小等），推荐使用 SCSS 的@forward和@use模块机制来实现。

原创 快速的暴露第三方组件的所有属性

【代码】快速的暴露第三方组件的所有属性。

原创 前端高级开发需要知道的 25 个 JavaScript 单行代码

原创 在项目中引入tailwind

这将会在您的项目根目录创建一个最小化的。在vite.config.js文件中配置。指令来包含 Tailwind的。这也将会创建一个包含已配置好的。样式，来替换掉原来的文件内容。

原创 Vue3 el-switch @change事件在初始化时会自动调用问题处理的几种方法

【代码】Vue3 el-switch @change事件在初始化时会自动调用问题处理的几种方法。

原创 项目中接入百度翻译API，实现自动翻译

所以综上，我们需要的参数以及方法就拆分的很明确了，请求方法，md5 加密方法，utf-8 编码方法，这些方法都可以直接引用或者是找到别人已经写好的，最文章的最后面会放上我自己用的。这里有一个小技巧，文档上的语言列表有点少，可能没有你要的语言，比如说我要翻译成繁体，但是文档没有，你可以直接去百度翻译上随便输入一段话翻译成你要的语言，我的就是繁体。打开控制台，你能够从请求当中得到这种语言的代码，在这里能够翻译的语言，比起文档上的列表，那多了可不止一点。：需要翻译的文本的原本语言，不确定可以填 auto。

原创 【无标题】

全局污染的问题:命名冲突会导致全局污染的问题。数据安全性问题。

原创 在el-table中使用formatter替代插槽使用

/ 引入组件和图标// 函数// 如果有多个列使用formatter 函数，这里用property 区分// 这里是我的业务所需要，可以根据自己的业务自行调整，重点是h函数},},});

原创 在el-form中实现必填项的动态控制

一开始想通过控制prop=“email”，但是发现虽然 * 可以控制但是没有提示信息，后来加上了:required="form.invoicing == ‘1’"就可以了。

原创 el-table对行内搜索行进行固定

需求首行和第二行固定，第一列固定，这里说的tbody里的行固定,(下面写法是用jsx写的)利用table组件里row-class-name属性给要固定的行样式。

原创 el-table行内搜索

封装行内搜索组件----TableLineSearch.vue。table所在的页面，这里只展示主要代码。如果不懂的具体可以私信我。

原创 vue使用富文本编辑器vue-quill-editor的图片改大小功能

【代码】vue使用富文本编辑器vue-quill-editor的图片改大小功能。

原创 el-select单选、多选切换无法清除历史数据

原因：组件没有重新渲染，加上 key 可以让dom重新渲染。

原创 若依中动态修改页面页签的名称

【代码】若依中动态修改页面页签的名称。

原创 eltable-右键菜单

【代码】eltable-右键菜单。

原创 内联函数的应用

需求：在el-table中，当拖动表头改变了列的宽度的时候会向后端发送请求，由于很多个表格都要用，就把headerDragend事件封装成一个工具函数，但是这里需要额外再传一个参数，所以....在script中引入即可，省事！

原创 lodash的debounce防抖动处理

总结一下就是用 _.debounce（需要防抖的函数，时间）处理，返回一个新的函数，然后使用。

原创 el-table的表头过长文字省略

自我摸索，如有BUG，欢迎指正修改。货不多说，直接源码。这是封装的组件，可以是直接引用的。

原创 自定义列,(自我记录)

【代码】自定义列,(自我记录)

原创 打印插件升级

public下面的print-lock.css记得也换成beta版的。

原创 ElementUI 实现el-table 列宽自适应

使用插件，有2中可选。

原创 Uni-app原生Tabbar使用多语言设置

Uni-app原生Tabbar使用多语言设置。

原创 vxe-table金额格式化

【代码】vxe-table金额格式化。

原创 路由跳转到某个页面，页面不刷新

我这里的原因是组件重名了。

原创 在Vue项目中使用自定义指令来解决按钮级权限问题

1.在 main.js 文件中引入。2.登录成功后、将权限数组缓存。

原创 vue裁剪图片

【代码】vue裁剪图片。