全部文章

前端技术文章目录

这里集中整理星野札记的前端技术分享,按真实开发路径覆盖组件、样式、状态、接口、性能、调试、构建、发布和长期维护。

20 前端专题
8 技术方向
3 工程补充

FRONTEND

前端技术分享

优先阅读这一组文章,可以从页面开发一路看到发布维护。

Vue 3 组合式 API 的组织方式

组合式 API 的重点不是把代码都塞进 setup,而是让状态、行为和副作用边界更清楚。

Vue 3 组合式 API

前端组件边界怎么划

组件拆分真正要解决的是职责、复用和变化隔离,而不是追求文件数量。

组件 边界

Pinia 状态管理的取舍

状态管理不是把所有变量搬进 store,而是识别哪些状态需要跨页面、跨组件和跨流程复用。

Pinia Store

前端路由守卫与首屏初始化

首屏稳定性取决于认证、配置、用户数据和页面渲染之间的顺序是否清楚。

路由 初始化

表单校验不只是判断为空

好的表单校验要同时处理输入时机、错误提示、提交锁定和服务端返回。

表单 校验

CSS 布局稳定性的细节

好布局不是只在当前屏幕看起来正常,而是数据变化、加载变化和移动端下都不乱。

布局 稳定性

响应式页面的真实难点

响应式设计不是简单换行,而是信息优先级、触控目标、阅读密度和布局稳定性的综合取舍。

移动端 适配

可访问性在业务页面里的落地

可访问性不是额外装饰,而是让键盘、读屏、对比度和语义结构都能支撑真实使用。

语义 键盘

前端性能优化检查清单

性能优化要从加载、渲染、交互和监控一起看,不能只盯着单个指标。

性能 体验

图片加载、占位与体验优化

图片体验取决于尺寸、格式、懒加载、占位和失败状态,而不是只看压缩率。

图片 占位

前端接口错误处理分层

接口失败不应该只弹一个错误提示,权限、业务校验、网络异常和系统错误要分开处理。

API 错误处理

网络不确定状态下的前端反馈

写请求超时后,前端要区分失败、成功未知和需要刷新确认,避免误导用户重复操作。

网络 反馈

前端问题排查的基本流程

排查问题要先复现、再缩小范围、最后定位责任边界,而不是从猜测开始改代码。

调试 复现

用控制台和网络面板定位问题

浏览器开发者工具能回答脚本、接口、资源和渲染的大部分一线问题。

DevTools Network

Vue 项目里的 TypeScript 使用边界

类型系统应该帮助表达业务结构和接口契约,而不是制造难以维护的类型体操。

TypeScript Vue

Vite 多环境构建的注意点

多环境构建最怕产物串环境,变量命名、输出目录和验证脚本都要明确。

Vite 环境

前端发布前应该检查什么

发布前检查不是形式流程,而是确认构建环境、资源路径、核心链路和回滚预案。

发布 验证

空状态、加载态和错误态设计

状态设计决定用户是否知道页面正在做什么、失败在哪里、下一步能不能继续。

状态 反馈

前端安全的基础边界

前端不能替代后端安全,但输入输出、鉴权状态、敏感信息和依赖风险都要认真处理。

安全 边界

前端项目长期维护靠什么

长期维护靠稳定目录、清晰边界、文档、测试和发布纪律,而不是靠某次重构解决一切。

维护 重构

PRACTICE

工程实践补充

这几篇保留为项目工程化、AI 辅助开发和部署恢复相关的补充阅读。