吴星喜的博客

作为一名前端开发者，你是否厌倦了每次开始新项目时都要重新配置繁琐的工程化环境？是否希望有一个开箱即用、集成现代前端最佳实践的 H5 模板？今天给大家推荐一个非常棒的开源项目——vite-vue3-h5-template，它能帮你快速搭建高质量的移动端 H5 项目。 项目简介vite-vue3-h5-template 是一个基于 Vue 3、Vite、TypeScript 和 Pinia 构建的现代化企业级移动端 H5 模板。该项目采用了前沿的技术栈和工程化方案，专为追求高性能、可扩展性和可维护性的移动 Web 应用开发而设计。 无论你是独立开发者还是团队协作，这个模板都能为你提供强大的支撑和便利的开发体验。 核心特性一览🚀 现代化技术栈项目集成了当前最热门的前端技术： Vue 3 Composition API - 更灵活的组件组织方式 Vite 7 - 极速的构建工具，开发体验飞一般 TypeScript - 强类型支持，提高代码质量和开发效率 Pinia - Vue 官方推荐的状态管理方案 UnoCSS - 高性能原子化 CSS 引擎 🏗️ Monorepo 架构采用 Mo ...

这两年刷技术社区，最常见的几个关键词就是「AI 提效」「十分钟上线一个营销页」「用 Prompt 写完一个项目」。 作为一个干了 8 年的前端，我当然承认 AI 带来的效率红利——我自己也在用 Cursor、Copilot、各种 LLM 写代码、补测试、查文档。但这两年下来，我越来越强烈地意识到一件事： “会用 AI” 本身不是本事，能为 AI 产出的代码兜底，才是。 以前我们写代码，脑子里有清晰的模块边界、职责划分。现在有了 AI，很多人习惯的是先喂一段 Prompt，看 AI 回什么，再想办法塞进项目里。如果你只是这样用 AI，你得到的不是“提效”，而是更快地把项目写成一坨谁也不想维护的屎山。 下面我就从一个 8 年前端的视角，讲讲我自己是怎么看待「从 Prompt 搬运工到架构兜底人」这件事的。 要警惕 AI 只“跑通”不“善后”我现在几乎天天用 AI 写代码，但有一个前提：AI 给我的东西，默认是不可信的草稿。 我在日常工作里真切踩到、或者在别人代码里见过的几个典型坑，大概是这些： 副作用和资源释放 在 useEffect / 各种响应式监听里，AI 很喜欢 ...

当你对 AI 说一句「帮我加个用户管理功能」时，它脑子里浮现的是“通用互联网公司 Demo”；你脑子里浮现的是“本公司 3 年沉淀 + 一堆历史债务”。—— 这就是 Vibe Coding 的鸿沟。 Vibe Coding：当“凭感觉写代码”遇上 AI先还原一个大家都心照不宣的场景。 你打开 Cursor / Claude Code / Copilot Chat，敲下： 1帮我实现一个用户管理模块，包含增删改查和权限控制。 几秒钟后，AI 秒回一坨代码： User 只有 id/name/email 权限就是一个 role === 'admin' 的 if 判断 没有审计日志、没有状态机、也没考虑你项目里的那套 RBAC 体系 你只好接着聊： 「再加上用户状态：激活 / 禁用 / 删除。」 「权限别乱写，我们是 RBAC，不是简单 role 判断。」 「要有批量操作，还要事务，还有限流……」 三轮下来，你发现： 需求理解：AI 是按“常识”猜，而不是按你项目的“现实世界”来写； 设计方案：它永远倾向“最简单能跑”的实 ...

本架构示例项目：AI Coding Guidelines 原文链接（掘金）：前端 AI Coding 落地指南（三）Skills篇 转载声明：本文为转载整理内容，仅用于技术学习与交流；相关版权归原作者所有。如有侵权，请联系删除。 本篇是《前端 AI Coding 落地指南》的续作，专门讲 Skills 的实践：什么是 Skills、如何找开源 skills、何时封装、从 Rules 拆出来的与流程类技能、第三方与自封装清单、技能下 rules 的拆分演进，以及每个自封装 skill 的 SKILL 与 rules 示例片段。首篇中已给出 Skills 的简要历程与清单，这里展开为可落地的细节。 Skills 是什么、解决什么问题Skills 是以 Markdown 写的「技能文件」，用来教会 Agent 完成某一类具体任务。通常一个技能一个目录，里面必有一份 SKILL.md（YAML 头 + 步骤说明 + 示例），还可以带子规则、脚本等。用途很广：按团队标准做 PR 审查、按约定写 commit、按规范查库表，以及我们这里的「创建提案、分析设计稿、加路由/组件&# ...

本架构示例项目：AI Coding Guidelines 原文链接（掘金）：前端 AI Coding 落地指南（二）Rules篇 转载声明：本文为转载整理内容，仅用于技术学习与交流；相关版权归原作者所有。如有侵权，请联系删除。 本篇是《前端 AI Coding 落地指南》的续作，专门讲 Rules 的实践：演进过程、设计原则、如何划分模块、何时写 Rules 何时写 Skills，以及项目级 Rules 的完整清单与每条 rule 的头部、介绍和通用化示例。首篇中已给出 Rules 的简要历程与清单，这里展开为可落地的细节。 Rules 是什么、解决什么问题Rules 是写在项目里的持久化指导，用 Markdown 等形式约定项目的规范、约束和惯例。Agent 在「需要确认某类规范时」按需读取对应规则文件，从而在生成或审查代码时遵守「做什么、不做什么」——命名、目录、接口契约、样式变量、错误处理等有据可查。 作用：统一边界（减少模型随意发挥）、按需加载（控制上下文长度）、提高接纳率（生成结果更符合项目既有约定）。能解决的 AI Coding 问题：规范不一致（没有规则时 AI ...

本架构示例项目：AI Coding Guidelines 原文链接（掘金）：前端 AI Coding 落地指南（一）架构篇 转载声明：本文为转载整理内容，仅用于技术学习与交流；相关版权归原作者所有。如有侵权，请联系删除。 方案更新说明：文中多 Agent 配置方案已从“软链接共享”升级为“以 .agents 为单一事实源，通过 scripts/sync-rules.js 进行脚本物理分发同步”。 你是不是也遇到过这些情况：AI 生成的代码风格和现有项目不一致；项目结构不符合预期，设计稿要么看不懂、要么分析漏项，页面 UI 还原度低；改来改去返工多，需求越走越偏，最后还得自己重写一版？ 我在实际项目里经过多次迭代的实践，落地了一套 以规范、能力扩展和流程为主线的 AI Coding 架构 把「风格不一致、步骤漏、设计稿不会分析/验收、提案任务格式乱」都收进可控范围。落地之后最直观的效果是： 前端页面可以做到 90% 还原设计稿，需求实现更准确，代码风格一致，结构设计合理 架构简介架构运用了多种现下流行的 Agent 通用能力： 架构组成 说明 SDD 开发 ...

前言：吸顶交互为什么总是写得又复杂又不稳？在移动端（尤其是 UniApp 多端）做 Tab 吸顶，经常会遇到这些痛点： 状态判断难：什么时候进入吸顶？什么时候退出？临界点经常抖动或算不准 临界值难算：导航栏高度、状态栏安全区、不同机型差异，导致 scrollTop 阈值到处写魔法数 性能与维护差：onPageScroll / scroll 高频触发，回调里反复计算元素位置，逻辑越写越“重” 更好的思路是：不用监听滚动，不用自己算临界点，让浏览器/小程序引擎帮我们判断“某个元素是否越过了一条线”。 核心思路：一条 1px 的“哨兵线”在 Tab（或需要吸顶的内容）附近放一个几乎不可见的节点（例如 1px 高），把它当成“哨兵”。 然后做两件事： 用 IntersectionObserver 监听哨兵是否还“在观察区域内”，从而判断是否吸顶 通过 rootMargin（UniApp 对应 relativeToViewport/relativeTo 的 top 参数）把“顶部触发线”下移到 offsetTop（通常是导航栏 + 安全区高度） 你可以把它理解成这样（示意）： ...

背景支付宝小程序提供了 my.setPageScrollable(false) 来阻止底层页面滚动，但由于系统实现层面的差异，安卓与 iOS 对于滚动禁止的层级控制存在区别： 安卓端：采用 Webview 级滚动限制（全页面锁定），生效时界面及所有弹层均不可滚动，导致弹层内的 scroll-view 也无法滚动； iOS 端：采用组件级滚动限制（局部锁定），当弹层激活时会智能区分层级，仅限制底层页面滚动而保持弹层可滚动。 这种平台差异会导致安卓端弹层内容无法滚动，而 iOS 端正常，体验不一致。为了保证遮罩弹层的沉浸体验，需要一套跨端一致的“纯 CSS”兜底方案。 my.setPageScrollable 介绍my.setPageScrollable 是支付宝小程序提供的全局滚动控制 API，可在当前页面维度禁止或恢复底层滚动。当传入 false 时页面不再跟随手势上下滚动，传入 true 则恢复默认行为。更多参数说明、平台差异和返回值请参考 官方文档。 最小 Demo1234567891011121314151617<template> <view cla ...

在 Cursor 中，Cursor Rules 是一套由开发者编写的指令集合，用来告诉 AI 助手在项目里该如何工作。通过编写规则，我们可以把协作偏好、代码风格、依赖约束、测试要求全部提前说明，让后续的自动化协作更加稳定、可控、贴合团队习惯。当一条规则被触发后，规则中的内容会被附加到提示词中，为 AI 提供参考，无论是在自动补全、代码生成、重构还是错误修复时都能遵循这些规范。 Cursor Rules 的核心作用 统一规范：把代码格式、提交规范、文件命名等约束写进规则，让团队成员和 AI 助手都有章可循。 减少沟通成本：常用的注意事项（例如“生产环境配置不要提交”、“测试跑通后再提交”）写进规则后，AI 会自动遵守，不必反复提醒。 保护敏感操作：可以明确禁止删除某些目录、覆盖配置文件或访问外部网络。 提升上下文记忆：当项目有特殊依赖或约定（如自研脚本、部署流程），可以预先写入规则，避免 AI“摸索”浪费时间。 Cursor Rules 和 常规提示词的区别常规提示词：临时指令 功能：告诉 AI 当前任务要做什么。 示例：在对话框里说“帮我写一个 React 组件，记得加类型定义”。 ...

前言在前端开发领域，”效率” 与 “沉浸感” 始终是我们开发者追求的核心目标。随着 AI 工具与工作流协同技术的发展，一种全新的开发模式 —— Vibe Coding（氛围编码） 逐渐兴起。它不再局限于单一工具的效率提升，而是通过与 AI 的对话，去除程序员对于代码的介入，构建符合个人开发节奏、降低认知负荷的沉浸式开发环境。 传统的开发模式中，开发者需要花费大量时间在代码实现、调试、优化等繁琐工作上。而 Vibe Coding 的核心思想是让开发者能够通过自然语言表达编程意图，指导 AI 编写、测试、优化代码，从而专注于设计产品和思考创意，而非繁琐的代码实现。 其中，AI 编辑器 Cursor 与 MCP（Model Context Protocol，模型上下文协议） 的组合，成为前端 Vibe Coding 的核心实践方案。本文将深入探索这一开发模式，从概念解析到实际应用，帮助开发者构建更高效的开发工作流。 核心概念解析1. Vibe CodingVibe Coding 直译是 “氛围编码”，它作为一种新兴的编程范式，由 OpenAI 联合创始人、前特斯拉 AI 部门总监 Andre ...