所有分类

前端 分类下的文章

npm 和 yarn

介绍 npm 和 yarn 包管理器的使用,包括修改国内镜像源、清除缓存等常用操作

登录后重定向到原先路由

Vue 登录功能实现,登录成功后重定向到用户原先访问的页面

patch-package使用

使用 patch-package 修改第三方依赖包,及时解决 node_modules 中包的 bug

TortosseGit的ssh配置

TortoiseGit SSH 密钥配置指南,使用 PuTTY Key 生成器创建 ppk 密钥

nginx常用配置

Nginx 常用配置指南,包括 HTTPS 配置、反向代理、负载均衡等

node后端部署

Node.js 后端服务 Docker 部署指南,包含 Dockerfile 配置和目录结构

mounted阶段获取不到dom的原因及解决方法

Vue mounted 钩子获取不到 DOM 元素的原因分析及解决方案,使用 setTimeout 和 nextTick

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`的适用与禁用场景,旨在帮助开发者有效避免页面闪烁和布局抖动。