前端相关技术文章

php mysql shell go vue css api接口对接支付接口对接

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速
2026-09-28 21:02:47
Tailwind CSS v4.2 与 v4.3 的迁移笔记：四套新调色板、官方 @tailwindcss/webpack 插件提速 2 倍、逻辑属性工具与 start-*/end-* 弃用改为 inset-s-*/inset-e-*，以及 v4.3 的 scrollbar、@container-size、zoom-* 等工具，附类名对照与兼容性说明。
Tailwind CSS 前端构建迁移

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退
2026-09-26 00:03:30
同一个卡片组件放进主栏和侧栏表现不一致，是因为媒体查询只看视口。这篇讲 CSS 容器查询（@container）的用法与约束：containment 如何短路无限循环、container-type size/inline-size 的副作用、cq 长度单位、样式查询、以及 94% 覆盖率下用 ResizeObserver + @supports 做回退，附 Vue 组件示例。
container queries CSS 容器查询前端响应式布局 Vue

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s
2026-09-25 21:02:18
Vite 8.0 把 esbuild+Rollup 双打包器统一为 Rust 写的 Rolldown，构建快 10-30 倍，Linear 生产构建从 46s 降到 6s。本文整理官方发布要点：插件兼容层、Node 20.19+/22.12+ 要求、安装体积增加约 15MB 的来源、plugin-react v6 去 Babel，以及大项目的两步渐进迁移路径。
Vite Rolldown 前端构建工具 Vue

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上
2026-09-24 21:30:49
Vue 3 的浅层响应式与逃生舱 API 不是性能开关。本文按边界逐个说明 shallowRef、shallowReactive、readonly、toRaw、markRaw、customRef 的适用位置与坑，并给出 Teleport、异步组件、KeepAlive、Suspense 的取舍：Suspense 至今仍是实验性，性能和可维护性该以测量为准而非猜测。
Vue Vue3 响应式 Composition API 前端

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了
2026-09-24 21:13:14
Vue 3.6 RC 的 Vapor Mode 编译期去掉 Virtual DOM，per-component 可选。讲清 <script setup vapor> 启用方式、createVaporApp 与 vaporInteropPlugin、VDOM 互操作的边界，以及 getCurrentInstance/v-memo/元素生命周期/全局属性等尚不支持的 API，附 3.6 的 alien-signals 响应式重构。
Vue 前端编译响应式

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件
2026-09-23 20:01:47
基于 vue@3.6.0-alpha.2 实测 Vapor 模式的事件机制：可冒泡事件进入 document 级委托，非冒泡事件与组件事件仍按传统方式。重点记录 @click.stop 的陷阱——混用传统 Vue 组件或直接 addEventListener 时，stop 无法阻止事件，传统组件的 stop 甚至会破坏委托链。
Vue Vapor 事件委托前端

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%
2026-09-20 21:02:41
TypeScript 5.9 带来 import defer 延迟模块求值（只能整模块命名空间导入）、稳定的 --module node20、精简的 tsc --init 默认；编译器缓存 mapper 实例化、优化文件检查，大项目约提速 11%。另有 ArrayBuffer 不再是 TypedArray 超类型的行为变更。
TypeScript 前端 JavaScript 编译优化

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装
2026-09-18 21:06:57
Pinia 4.0.0（2026-07-14）只做技术性破坏变更：包改为纯 ESM、删除 CJS 入口、提高最低 TypeScript 版本，@vue/devtools-api 升级到 v8 并需与 pinia 一起安装；同时用 Nostics 重构错误与开发警告。本文列出版本支持状态与升级检查清单。
Vue Pinia 前端 ESM 升级

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals
2026-09-13 21:03:37
Vue 3.6 进入 RC：Vapor Mode 特性完备、100% opt-in，用 script setup vapor 开启，不支持 Options API、Suspense 只能在 VDOM 侧包裹；@vue/reactivity 底层改为 alien-signals 重构，性能与内存占用提升。含适用场景与当前 rc 状态说明。
Vue Vapor Mode 前端响应式构建

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面
2026-09-12 09:55:55
Oil Motion 是 Agent 通用交互动画 Skill：先生成关键画面确认主体不漂移，再用 AI 视频填充中间过程，最后把视频转成帧序列映射到滚动、鼠标、拖动、触摸或设备方向；用户操作即时响应零延迟且每次结果一致，按场景自动选 WebP 图集/MP4/分片等资源格式，把 AI 创造力与程序确定性结合成主动响应的交互元素。
Oil Motion 交互动画 AI视频前端滚动动画

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件
2026-09-12 09:52:29
garden-skills 是 ConardLi 开源的四合一 Agent 技能集合：web-design-engineer 内置 Linear、Aesop、Bloomberg、Stripe Press 等 25 种风格配方与六步设计流程，web-video-presentation 一键把文章变 16:9 网页演示支持 TTS 配音，另有 gpt-image-2 图像提示词引擎与 kb-retriever 本地知识库检索；每个技能都是含文档、脚本、素材的工程化单元，支持六大平台安装。
garden-skills AI设计技能集合 Claude Code 前端

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美
2026-09-12 09:50:28
awesome-design-md 由 VoltAgent 团队开源：基于 Google Stitch 提出的 DESIGN.md 概念，把 Claude、Apple、Spotify、Linear、Stripe 等 50+ 顶级品牌的视觉 DNA 反向工程成现成 Markdown 设计系统文档，丢进项目根目录即可让 AI 编码代理生成一致、高级的 UI，零安装复制即用。
awesome-design-md DESIGN.md AI UI 设计系统前端

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑
2026-09-10 21:02:41
Vue 3.6 的 Vapor Mode 进入 RC，给 script setup 加 vapor 属性即可开启。本文讲清 createVaporApp 与 vaporInteropPlugin 两条路线的包体差异、哪些依赖 VNode 与公共实例代理的代码会不可用，并给出现阶段的适用场景与迁移注意点。
Vue 前端性能 VaporMode

React 19.3.0 版本解读：ViewTransition 动画、Fragment Refs 与 browser() 新 API

React 19.3.0 版本解读：ViewTransition 动画、Fragment Refs 与 browser() 新 API
2026-09-10 12:17:35
React 19.3.0（2026-09-09）发布：新增 ViewTransition 组件与 addTransitionType API 支持视图过渡动画、Fragment Refs、服务端友好的 browser() 与 onBrowserBailout，Transitions 独立渲染互不阻塞，并默认集成 Trusted Types。
React 前端 ViewTransition Fragment Refs browser()

JS 只做增强层：让 AI 爬虫看懂页面必备内容

JS 只做增强层：让 AI 爬虫看懂页面必备内容
2026-09-08 05:08:51
AI 爬虫不一定执行 JS：必备内容只活在脚本之后，页面可能难以匹配用户问题、署名也难发生；把必要内容与交互增强分开处理。
AI SEO 前端教程

全站每个 URL 都返回同样的 3,780 字节，Google 信了

全站每个 URL 都返回同样的 3,780 字节，Google 信了
2026-09-08 05:08:47
CSR 站点所有 URL 渲染前字节相同被 Google 当重复内容：渲染是有预算的队列；post-build 注入真 head，小心 react-helmet-async 的 data-rh 陷阱。
SEO React 前端实践

React 站点提速：先把图片修好

React 站点提速：先把图片修好
2026-09-08 04:10:36
图片常吃掉页面大半重量：按断点裁剪、WebP/AVIF 格式、懒加载一个属性，但 LCP 主视觉要预加载；四条规则立竿见影。
React 性能前端教程

Vue 3.6 升级笔记：Vapor 按需启用，事件委托默认直挂元素

Vue 3.6 升级笔记：Vapor 按需启用，事件委托默认直挂元素
2026-09-07 21:07:42
Vue 3.6（2026-07-18 正式发布）前端升级笔记：Vapor Mode 100% opt-in、跳过 VDOM 直操作真实 DOM，依赖 VNode/公共实例 proxy 的功能不可用；rc.2 起 Vapor 事件委托默认直挂元素而非委托 document（.delegate 修饰符 opt-in、compilerOptions.eventDelegation 已移除）；@vue/reactivity 迁移到 alien-signals，建议回归 computed/watch；附 Vite 8/Rolldown 相关链接。
Vue 前端 Vapor Vite

用 AI 版自己替换开发 portfolio：当网站的主界面变成对话

用 AI 版自己替换开发 portfolio：当网站的主界面变成对话
2026-09-07 19:13:13
把个人站改造成对话主界面：Markdown 知识库 + 按需检索 + 生成流式回答。含上线被真实用户打爆的教训：serverless 超时、后端自托管，以及代表真人的置信度三态设计。
AI 前端 Svelte 个人站 RAG

照片编辑器预览与导出不一致？用版本化渲染计划统一构图决策

照片编辑器预览与导出不一致？用版本化渲染计划统一构图决策
2026-09-07 17:12:12
照片编辑器预览与导出不一致的根因是构图决策未固化：把选源、裁剪、分层、随机种子存成版本化渲染计划，预览与高清渲染消费同一决策源。含 TypeScript 类型设计与归一化坐标要点。
TypeScript 渲染架构设计前端

React 状态“一直正常”——直到同时打开两个标签页

React 状态“一直正常”——直到同时打开两个标签页
2026-09-07 16:36:31
useState 限定在组件树、localStorage 限定在源：多标签页下旧快照互相覆盖。监听 storage 事件重读 localStorage 即可同步，含完整 Hook 代码与 BroadcastChannel 替代方案。
React 前端 localStorage 工程实践

为什么把前端当后端做会失败

为什么把前端当后端做会失败
2026-09-07 12:13:56
前端不是简单的逻辑问题：UX 情境化、可访问性、键盘焦点与标注过度都会让界面翻车。文章拆解前后端哲学差异，用标题大纲、焦点管理、替代文本三个例子说明只看视觉判断网站的陷阱。
前端可访问性用户体验 HTML

CSS 月度速览：Custom Highlight API、text-stroke 修复与导航匹配

CSS 月度速览：Custom Highlight API、text-stroke 修复与导航匹配
2026-09-07 09:50:46
CSS-Tricks !important 第 17 期要点：Custom Highlight API 全浏览器支持、img 内容溢出与 CSS 换图、paint-order 修复 text-stroke、纯 CSS 骨架屏、scroll-axis-lock 对角线滚动与 CSS 导航匹配。
CSS 前端浏览器特性

VS Code 的 docfind：用 Rust 和 WebAssembly 构建快速客户端搜索

VS Code 的 docfind：用 Rust 和 WebAssembly 构建快速客户端搜索
2026-09-07 05:14:06
VS Code docfind 技术解读：用 Rust+WebAssembly 构建纯客户端文档搜索，FST 快速关键词查找 + RAKE 关键词提取 + FSST 字符串压缩，索引紧凑、查询即时、零服务端依赖。
VS Code docfind Rust WebAssembly FST 搜索引擎前端

大家都在搜索什么？

devops 易支付一个官网+多少钱统一接受回调统一回调 python sub node 宝塔日志 mysql shell ElasticSearch css vue api接口对接 2025 支付接口对接 go php php回调