前端 分类下的文章
npm 和 yarn
这篇文章介绍了前端开发者常用的npm和yarn包管理工具的使用技巧，核心内容包括：如何修改npm和yarn的镜像源为淘宝镜像以加速访问；如何查看和修改全局安装路径及缓存路径；如何通过npm link和npm pack进行本地调试；以及如何使用nrm、yrm、cgr等第三方工具快速切换源。此外，还提供了升级依赖的方法（如ncu工具）和CLI命令对比，帮助开发者更高效地管理项目依赖。
登录后重定向到原先路由
本文介绍了实现登录后重定向到原先路由的完整方案，包括编写login.vue和redirect.vue页面、在router.js中定义相关路由，以及通过路由守卫进行权限控制，确保用户登录后能自动跳转回访问前的页面。
patch-package使用
patch-package是一款用于修改第三方依赖包的工具。它允许开发者直接在node_modules中修改依赖文件，然后生成补丁文件并提交到代码仓库。通过配置postinstall脚本，可在每次安装依赖时自动应用补丁，有效解决第三方包的bug问题。该工具支持yarn和npm，并提供多种选项如指定补丁目录、排除或包含特定路径等，同时支持嵌套依赖模块的修改和补丁的更新与撤回操作。
TortosseGit的ssh配置
本文介绍了TortoiseGit的SSH配置方法。由于TortoiseGit使用ppk格式密钥而非OpenSSH格式，需通过PuTTY Key Generator生成密钥，保存为private.ppk文件。随后使用Pageant工具加载该密钥，并在Git和TortoiseGit设置中分别添加SSH Key及指定private.ppk路径。完成配置后即可使用TortoiseGit进行代码拉取与提交操作。
nginx常用配置
本文总结了Nginx的常用配置，包括HTTPS设置、GZip压缩静态文件（重点针对HTML、CSS、JS等文本资源可达到70-90%压缩率）、HTTP自动重定向到HTTPS、缓存时间控制及防止直接访问目录。核心要点是精细化缓存策略：让入口HTML不缓存，带Hash的静态资源永久缓存，并建议CDN配置与源站保持一致。
node后端部署
本文介绍了Node后端部署的完整流程，包括项目目录结构、Dockerfile配置、deploy.sh部署脚本、nginx.conf反向代理设置以及publish.sh发布脚本的使用。通过Git Bash在项目根目录执行相关命令，实现自动化部署。核心要点涵盖Docker容器化、Nginx配置和脚本化部署步骤。
mounted阶段获取不到dom的原因及解决方法
在Vue的mounted阶段无法获取DOM元素，主要原因是DOM渲染是异步完成的，而获取操作是同步任务，导致在虚拟节点转为真实节点前执行。此外，若元素使用了v-if或v-for且初始值为false或空数组，也会导致获取失败。解决方法包括：在异步获取数据并赋值后，使用setTimeout延迟执行获取操作；或将获取逻辑放在updated生命周期中，并通过this.$once控制只执行一次。
Invoker Commands API 说明文档
Invoker Commands API 是一种新兴的 Web 声明式 API，允许开发者直接在 HTML 中通过属性（如 `commandfor` 和 `command`）控制 UI 交互元素（如弹出框、对话框），而无需编写大量 JavaScript 事件监听器。这减少了页面初始加载对脚本的依赖，提升了交互的即时性和性能。API 提供了内置命令（如切换弹出框、显示模态对话框）并支持自定义命令扩展，已在主流浏览器中获得基础支持，适用于简化交互实现并优化首屏体验的场景。
浏览器调试
Chrome 浏览器开发者工具调试技巧，包括异常断点、DOM 断点等高级调试方法
Webpack 的 sourcemap 配置
Webpack sourcemap 配置详解，介绍 eval、nosources、cheap、module 等基础配置及其组合规律
vscode调试 Vue 项目
VSCode 调试 Vue 项目配置指南，支持 webpack 和 vite 两种构建工具的项目
.VSCode Chrome Debugger配置详解
VSCode Chrome Debugger 配置详解，介绍 launch 和 attach 两种调试模式的配置方法
VSCode Chrome Debugger 断点映射的原理
VSCode Chrome Debugger 断点映射原理，解决断点不生效和位置错误的问题
调试 Vue 源码
Vue 源码调试方法，使用 vue-cli 创建项目并配置 source-map 进行调试
vue-element-admin使用
vue-element-admin 后台管理框架使用指南，包括移除 mock、配置代理等
el-upload封装
Element UI el-upload 组件二次封装，实现文件上传功能组件化
文件上传
Vue2 文件上传实现，使用 Element UI el-upload 组件实现自动上传和手动上传
mavon-editor局部引入
Vue2 中局部引入 mavon-editor Markdown 编辑器组件的配置方法
vuex使用
Vue2 Vuex 状态管理使用指南，包括 store、mutation、action 的基本用法
注意事项
Vue3 开发注意事项，包括 setup 函数、路由使用、props 定义等常见问题
swagger自动生成接口
使用 @zeronejs/cli 工具根据 Swagger 文档自动生成前端 API 接口代码
动态路由
Vue3 动态路由实现，根据用户权限动态添加路由并使用 pinia 管理路由表
整合 Element Plus
Vue3 整合 Element Plus，使用 unplugin-auto-import 和 unplugin-vue-components 实现自动导入
wangeditor使用
Vue3 中使用 wangeditor 富文本编辑器，包含工具栏配置和组件封装
monacoEditor使用
Vue3 + Vite4 中集成 Monaco Editor 代码编辑器，实现组件封装
自定义404页面
Vue2 和 Vue3 自定义 404 页面实现，包含页面样式和返回首页功能
验证码封装
Vue3 EasyCaptcha 验证码组件封装，实现验证码显示和校验功能
联表查询SQL
MyBatis 联表查询 SQL 示例，实现用户分页列表查询并关联部门和角色信息
element-plus多文件手动上传
Element Plus 多文件手动上传实现，设置 auto-upload=false 一次性提交多个文件
tsconfig.json详解与常用配置
TypeScript tsconfig.json 配置详解，包含顶层配置、compilerOptions 和常用编译选项
CSS高度自适应
本文介绍了CSS中实现高度自适应的关键技术与策略。核心围绕`content-visibility: auto`属性及其配套属性`contain-intrinsic-size`展开，前者用于优化长列表等非首屏内容的渲染性能，后者则解决其导致的高度塌陷问题。文章还强调了`min-height`作为基础布局保障的作用，并明确了`content-visibility: auto`的适用与禁用场景，旨在帮助开发者有效避免页面闪烁和布局抖动。