前端项目如何做 vibe coding-北京尧图网络

Vue 项目 Vibe Coding 指南Vibe Coding指以自然语言与 AI如 Cursor Agent协作完成软件开发的模式你描述意图AI 读代码、改代码、跑命令你负责方向、验收与关键决策。本文档面向Vue 3 项目给出一条可重复、可落地的 Vibe Coding 流程——从业务需求澄清到技术选型、架构设计、Skill/Rule 定义再到日常开发与质量把关。不绑定某一具体业务可作为任意 Vue 项目的启动模板。1. 核心观念Vibe Coding ≠ 无规矩地生成代码很多失败案例来自需求一句话带过 → AI 直接改代码 → 风格漂移、架构混乱、难以维护。正确的 Vibe Coding 是「人定方向 AI 执行机器校验」的三段式人业务目标、边界、验收标准 AI调研、选型建议、实现、重构、补测试机器ESLint / vue-tsc / Vitest / CI / Git Hook规矩越前置AI 越像「带规范的 pair programmer」而不是「碰运气的代码生成器」。2. 完整流程总览阶段人的职责AI 的职责产出物① 需求澄清写清用户、场景、约束、验收追问遗漏、整理 PRD 草稿需求说明 / 用户故事② 技术选型拍板最终方案对比方案、列 trade-offADR / 技术栈文档③ 架构设计确认分层与边界目录结构、模块图、数据流docs/architecture.md④ Skill决定装哪些、是否自研检索社区 Skill、起草 SKILL.md.cursor/skills/⑤ Rules Lint确认团队规范生成.mdc、补 ESLint 规则.cursor/rules/、lint 配置⑥ 迭代开发拆任务、验收读上下文、小步改代码功能代码⑦ 验证关键路径人工测跑 lint/test、修报错可合并的 PR原则先文档与规矩再写功能先架构与边界再让 AI 动刀。3. 阶段 ①澄清业务需求一切起点在让 AI 写任何代码之前先把需求说到AI 和人都能执行的程度。3.1 需求应包含的要素要素说明示例用户与场景谁在用、在什么设备/环境下用iPad 横屏排练、后台运营人员核心用户旅程从进入到完成目标的步骤登录 → 选项目 → 编辑 → 导出功能边界做什么、不做什么本期不做离线同步、不做多租户非功能需求性能、兼容、安全、合规首屏 3s、支持 Chrome/Safari、数据不出境验收标准可测试的完成定义「导出文件可被 X 软件打开且无乱码」现有约束必须沿用的栈、设计系统、API已有 REST 后端、必须用 Element Plus3.2 用 AI 帮忙「补全需求」需求初稿往往不完整。可以让 AI 担任需求分析师而不是程序员我是 Vue 3 前端要做 [一句话描述]。请列出① 可能遗漏的用户场景 ② 边界情况 ③ 非功能风险 ④ 需要我确认的问题清单。不要写代码只输出结构化需求追问。AI 应输出问题清单你逐条回答后再进入下一阶段。避免 AI 在假设未验证的情况下直接选型或编码。3.3 需求文档最小模板建议在docs/或 Issue 中留一份短 PRD一页以内即可# [功能名] ## 背景 ## 用户与场景 ## 用户故事As a … I want … So that … ## 范围In / Out ## 验收标准Given / When / Then 或 checklist ## 依赖与风险后续所有 Architecture、Skill、Rule、Prompt 都应能回溯到这份 PRD。4. 阶段 ②AI 辅助技术选型需求清楚后再讨论「用什么技术实现」。这一步AI 给建议人做决策。4.1 选型时要喂给 AI 的上下文业务需求[粘贴 PRD 摘要] 团队能力[熟悉 Vue不熟悉 React Native] 硬性约束[必须 Web 可选 App、后端已是 Java、部署在阿里云] 偏好[TypeScript、倾向开源、可接受 WASM 体积] 请给出 23 套前端技术方案对比开发效率、维护成本、包体积、生态、风险。最后给出推荐方案与「若不选推荐方案的后果」。不要直接生成项目代码。4.2 Vue 项目常见选型维度维度典型选项选型考量框架Vue 3团队主栈默认 Composition API script setup构建Vite生态默认SSR 需 NuxtUI 库Element Plus / Naive UI / Vant / Ionic VueB 端 vs C 端 vs 移动端壳状态Pinia全局状态服务端状态可用 TanStack Query路由Vue Router标准方案跨端Capacitor / uni-app原生能力 vs 一套代码多端SSR/SSGNuxt 3SEO、首屏、同构测试Vitest Vue Test Utils Playwright/Cypress单测 E2E 分工样式Tailwind / SCSS / CSS Modules与设计系统是否一致4.3 输出技术决策记录ADR让 AI 把结论整理成Architecture Decision Record避免后续对话中 AI「换栈」# ADR-001前端技术栈 ## 状态已采纳 ## 背景 ## 决策 - Vue 3 Vite TypeScript Pinia Vue Router - UIElement Plus ## 备选方案及未采纳原因 ## 后果正面 / 负面将 ADR 放入仓库如 docs/adr/并在 .cursor/rules/ 中加一条 alwaysApply 规则引用主栈防止 AI 擅自引入 React 或 Options API 全家桶。5. 阶段 ③AI 辅助架构设计选型确定后先画架构再写页面。这是 Vibe Coding 中最容易被跳过、也最容易翻车的步骤。5.1 架构设计要回答的问题代码放哪里目录与分层数据怎么流Props / Emit / Store / API / 本地缓存哪些是纯逻辑、哪些是 UI可否单测模块边界是什么谁不能 import 谁扩展点在哪里新页面、新 API、新插件5.2 推荐 Prompt让 AI 出架构草案基于以下 PRD 和 ADR为 Vue 3 项目设计前端架构。要求 1. 给出 src/ 目录树及每个目录的一句话职责 2. 画数据流用户操作 → 组件 → composable → api/lib → 后端/存储 3. 说明 Pinia store 与 composable 的分工原则 4. 列出 3 条「禁止事项」如页面组件不得直接 axios、lib 不得 import .vue 5. 给出 23 个核心模块的组件拆分草图props/emits 约束Composition API script setup不引入新框架。输出 markdown不要写实现代码。5.3 Vue 项目通用分层模型适用于多数中大型 Vue 应用src/ ├── views/ # 路由级页面编排、布局、组合 composable │ └── feature/ │ ├── IndexPage.vue │ └── components/ # 仅本 feature 使用的子组件 ├── components/ # 跨 feature 复用的展示组件 ├── composables/ # useXxx组合式逻辑、副作用、与 Vue 生命周期绑定 ├── stores/ # Pinia跨页面共享、可持久化的应用状态 ├── api/ # HTTP 客户端、请求封装、DTO 类型 ├── lib/ # 纯 TS 领域逻辑无 Vue 依赖易单测 ├── router/ ├── assets/ └── types/经验法则层级放什么不放什么views/页面编排、路由参数、组合子面板复杂算法、直接 DOM 操作composables/表单状态、分页、轮询、与 ref 绑定的逻辑与 UI 无关的纯计算应下沉 libstores/用户信息、全局 UI 偏好、购物车等巨型「万能 store」lib/格式化、校验、解析、业务规则import { ref } from vueapi/REST/GraphQL 调用业务分支判断5.4 架构文档应固化到仓库AI 生成的架构草案经你修订后写入docs/architecture.md内容包括目录约定数据流图可用 mermaidStore 划分表命名规范组件、composable、emit与后端/API 的边界之后在每次开发 Prompt 里可写「遵循 docs/architecture.md」减少 AI 自创目录结构。5.5 用 AI 做「架构 Review」首版架构或重大功能上线前阅读 docs/architecture.md 和 src/views/order/ 下的实现。找出① 违反分层的文件 ② 重复逻辑 ③ 难以测试的部分 ④ 建议拆分的 composable。输出优先级 P0/P1 的重构清单不要直接改代码。6. 阶段 ④查询、安装与定义 SkillSkill是教 AI如何完成某类任务的操作手册工作流、检查清单、领域步骤存放在项目级.cursor/skills/团队共享随仓库版本管理个人级~/.cursor/skills/跨项目6.1 Skill 与 Rule 的分工SkillRule作用教「怎么做一件事」的流程约束「在这个项目里必须/禁止怎样写」粒度任务型写 composable、做 Code Review规范型目录、命名、分层示例vue-best-practicesglobs: **/*.vue的组件约定两者互补Skill 管方法Rule 管边界。6.2 如何「查询」现有 Skill社区与官方来源vuejs-ai/skills — Vue / Pinia / composable 等Cursor 文档与社区分享的 Skill 仓库团队内部 Git 仓库中的.cursor/skills/安装方式示例# Cursor CLI网络可达时 npx skills add vuejs-ai/skills \ --skill vue-best-practices \ --skill vue-pinia-best-practices \ -a cursor -yVue 项目常见起步 SkillSkill用途vue-best-practicesComposition API、SFC、组件拆分、响应式vue-pinia-best-practicesStore 写法、解构陷阱、持久化create-adaptable-composableMaybeRef可复用 composable在 Prompt 中显式激活Use vue skill, …具体 invocation 方式以 Cursor 当前版本为准。6.3 何时需要「自定义 Skill」社区 Skill 覆盖框架通用实践不覆盖你的业务领域。出现以下情况应自研 Skill有固定的领域工作流如「新增一种导出格式」的 6 步检查清单有第三方 SDK 的非 obvious 用法WASM、Canvas、WebRTC有团队统一的 PR Review / 发布流程同一类任务 AI 反复犯同样的错6.4 自定义 Skill 的结构.cursor/skills/your-domain-feature/ ├── SKILL.md # 必需frontmatter 步骤说明 ├── reference.md # 可选详细 API、协议 └── examples.md # 可选正反例SKILL.md frontmatter 示例--- name: vue-feature-module description: - Add a new feature module to this Vue app: views, composable, api, and tests. Use when creating routes or feature folders. ---正文应包含触发条件何时用本 Skill分步工作流有序步骤可勾选必须阅读的仓库文件列表完成后的验证命令npm run lint等反模式不要做什么让 AI 帮你起草 Skill我们项目做 [领域简述]。AI 在 [具体任务] 时经常 [犯错描述]。请为 Cursor 起草一个项目 Skillname、description、分步 workflow、验证清单、3 条 anti-patterns。格式符合 SKILL.md frontmatter 规范。6.5 Skill 维护与代码一起 PR ReviewSkill 过时比没有 Skill 更危险大 Skill 拆成SKILL.mdreference/避免单次上下文过长在docs/或.cursor/skills/README.md记录安装与更新命令7. 阶段 ⑤定义 Rules 与 Lint为 IDE 立规矩Skill 解决「怎么做」Rule Lint解决「不能越界的线」。7.1 Cursor Rules.cursor/rules/*.mdc建议按关注点拆分而非一个巨型 rule 文件Rule 文件globs 示例内容vue-core.mdc**/*.{vue,ts}script setup、路径别名、命名vue-pages.mdc**/*.vue页面 / 组件放置、props-emitspinia-stores.mdcsrc/stores/**store 命名、持久化、storeToRefsapi-layer.mdcsrc/api/**错误处理、类型、禁止在组件里裸 fetchdomain-lib.mdcsrc/lib/**纯 TS、禁止 import Vueproject-stack.mdcalwaysApply: trueADR 摘要栈、测试命令、分支策略Rule 编写原则每条规则可执行「用 storeToRefs」而非「注意响应式」引用仓库内真实路径作为范本参考 src/stores/user.ts控制在50 行以内为宜细节放docs/用globs精准触发减少无关上下文噪音让 AI 生成 Rule 草案根据 docs/architecture.md生成 3 个 Cursor rule 文件.mdc 1. Vue 页面与组件放置 2. Pinia store 约定 3. src/lib 纯函数边界每个 rule 含 frontmatterdescription、globs、条目化约束、一个正确示例。7.2 ESLint TypeScript Git HookAI 生成的代码必须通过机器门禁否则 Vibe Coding 不可持续。推荐基线Vue 3 TSeslint eslint-plugin-vue vue/eslint-config-typescript vue-tsc类型检查 Vitest单测 husky lint-staged提交前 CI 中复跑 lint / typecheck / testpackage.json 脚本示例{ scripts: { lint: eslint src tests, typecheck: vue-tsc --noEmit, test:unit: vitest run }, lint-staged: { *.{vue,ts,js}: eslint --max-warnings 0 } }.husky/pre-commitnpm run typecheck npx lint-staged 在 Rule 或 Skill 中写明「改完代码必须跑 lint typecheck」并在 Prompt 末尾附上相同要求。7.3 可选AGENTS.md部分团队会在根目录增加AGENTS.md给 AI 一段项目入口说明如何启动、测试命令、目录地图、链接到 architecture。与 Rules 类似但更偏「 onboarding 索引」。8. 阶段 ⑥日常 Vibe Coding 开发循环规矩就绪后进入高频迭代。推荐单次任务一个闭环。8.1 任务拆分把 PRD 拆成可在一个会话内完成的小任务✅ 「订单列表页composable 分页表格组件空状态」❌ 「把整个电商后台做完」8.2 标准 Prompt 模板Use vue skill. ## 背景 [链到 PRD 或 architecture 的一两句话] ## 任务 [具体、可验收的一句话] ## 约束 - 遵循 docs/architecture.md 与 .cursor/rules/vue-pages.mdc - 不修改 [明确不动的模块] - Composition API script setup TypeScript ## 相关文件可选 src/views/order/IndexPage.vue ## 完成后 npm run lint npm run typecheck npm run test:unit 简述改动文件与如何手动验证。8.3 AI 开发逻辑Agent 侧应遵循的顺序1. 读需求与约束 → 确认任务范围 2. 读 architecture、相关 rule、现有同类代码 3. 规划改动文件列表先列表再动手 4. 小步修改优先 lib/composable再改 UI 5. 跑 lint / typecheck / test修到通过 6. 输出改了什么、如何验证、已知限制Vue 特有注意点新组件默认script setup langtsProps down / Emits up从 Pinia 解构状态用storeToRefs列表性能大列表考虑虚拟滚动避免在列表项里堆抽象组件路由级页面做编排业务逻辑进 composable / lib8.4 适合交给 AI 的工作类型示例样板代码CRUD 表格、表单、对话框、路由注册重构从巨型.vue抽useXxx类型与 lint补类型、修 ESLint、修 vue-tsc 报错测试为lib/纯函数写 Vitest文档ADR、API 说明、组件 props 文档8.5 需人工主导、AI 辅助的工作类型原因安全与权限模型AI 易漏边界 case支付、隐私、合规需法务/安全 review核心领域算法需 spec 单测人工验算包体积与性能预算需 profiling非猜破坏性 API 变更需版本策略与迁移计划9. 阶段 ⑦验证、Review 与持续改进9.1 验证层次L1 机器lint vue-tsc unit test每次提交 L2 本地npm run dev 手动走用户旅程 L3 集成E2EPlaywright / Cypress关键路径 L4 人审架构边界、安全、UX、无障碍 Prompt 中要求 AI 自己跑 L1L2L4 由你或 CI 负责。9.2 用 AI 做 Code ReviewReview 本次 diff不要改代码 1. 是否违反 docs/architecture.md 2. 是否有重复逻辑可抽 composable/lib 3. 是否有明显性能问题大列表、watch 滥用 4. 测试是否覆盖核心分支输出按严重程度排序的 findings。9.3 从失败中更新 Skill / Rule若 AI重复犯同一错误不要只在聊天里纠正一次把纠正写进Rule硬约束或Skill流程步骤必要时加单测锁住行为Vibe Coding 的复利来自每一次翻车都让规矩变强一点。10. Vibe Coding 的优劣Vue 项目视角10.1 优势优势说明交付速度快表单、列表、路由、Store 样板极快降低入门成本新人通过对话 architecture 快速定位模块规范可编码Skill Rule 把团队习惯注入 AI 上下文重构友好「抽到 composable」类机械搬迁 AI 擅长文档即 specPRD / ADR / architecture 可直接当 Prompt 附件10.2 劣势与风险风险表现缓解上下文有限漏读关联文件改了一处坏另一处小任务、显式文件、先规划后改架构漂移每个会话一种写法ADR Rules architecture 固化幻觉 API编造不存在的 Vue 库 API以 lockfile 和现有代码为准typecheck 兜底上帝组件逻辑全堆进.vueRule 限制强制 composable 拆分测试债务改完不跑 testpre-commit Prompt 要求跑 test过度抽象无意义的 helper 层「最小 diff」写进 Rule隐私业务数据进入模型企业隐私设置、脱敏、本地模型若可用10.3 何时适合 / 不适合适合 Vibe Codinggreenfield 或中等复杂度的 Vue 功能模块UI 迭代、Design system 落地技术债清理lint、类型、拆组件有清晰 PRD 和 architecture 的迭代应降低 AI 自主权金融、医疗等强合规场景的核心链路无 spec 的复杂算法大规模迁移Vue 2→3、换 UI 库需分阶段人工掌舵11. 新项目 Checklist可直接复制## Vibe Coding 启动清单 - [ ] PRD用户、范围、验收标准 - [ ] ADRVue 3 技术栈定稿 - [ ] docs/architecture.md目录、数据流、Store 划分 - [ ] 安装社区 Vue Skillvue-best-practices 等 - [ ] 自定义领域 Skill如有 - [ ] .cursor/rules/vue / pinia / api / lib 分层规则 - [ ] ESLint vue-tsc Vitest husky - [ ] CIlint typecheck test - [ ] 首个 feature 用小任务标准 Prompt 试跑一轮 - [ ] 根据翻车更新 Rule / Skill12. 附录Prompt 速查需求澄清针对 [功能]列出必须确认的 10 个问题按优先级排序。不要写代码。技术选型给定 PRD 和约束输出 2 套 Vue 前端方案对比表推荐 ADR 草稿。架构设计输出 src/ 目录树、数据流 mermaid、Pinia 划分、3 条禁止事项。不要写实现。创建 Skill为 [任务类型] 起草 .cursor/skills/xxx/SKILL.md含 workflow 与 anti-patterns。创建 Rule根据 architecture 生成 .mdc ruleglobs、可执行条目、正例一行。功能开发Use vue skill. 任务… 约束architecture rules. 完成后 lint typecheck test。架构 / Code ReviewReview [路径或 diff]只输出 findings按 P0/P1 排序不改代码。13. 总结正确的 Vue Vibe Coding 路径先讲清业务— PRD 与验收标准是一切的前提再让 AI 帮选型与架构— 人拍板AI 调研与起草结果写入 ADR / architecture然后立规矩— 社区 Skill 自研 Skill Cursor Rules Lint/Hook再小步开发— 显式约束、读现有代码、最小 diff、机器验证最后从失败中迭代规矩— Rule / Skill / 测试与文档同步进化Vibe Coding 的价值不在于「少写代码」而在于在明确边界内放大实施速度。边界越清晰AI 越可靠规矩越薄翻车越频繁。资料展示下面是我整理的AI大模型学习资料和工具包预览适合收藏后按主题逐步学习。如果你想看完整资料目录可以在评论区留言「资料」也欢迎告诉我你更关注AI大模型里的哪类内容。

前端项目如何做 vibe coding

相关推荐

给别人做IT自己工具先乱，胆子真是肥嘟嘟

基于大模型人工智能的钍基熔盐堆腐蚀防护系统软件平台

金融安全视角下AI生成代码的幻觉、漏洞与模块关联异常研究——颠覆网络安全根基的隐形危机

更多资讯

电工证复审需要资料吗保姆级教程：南阳在职建筑工人怎么操作

中级电工证需要什么？上岗必备条件全解析

山西煤炭十大特种工怎么考？2026河南最新政策全解析

安监局电工证分级不？学历不高怕报不上名？值不值得考？

考电工证到底该去哪里全流程办理指南

电工证查了到网上查询怎么操作?证书过期了不知道怎么复审延期

今日更新

桐乡去哪考电工证怎么考？全国通用电工证报考全流程详解

低压电工证是必须的嘛电子证书怎么申请更稳妥

特种作业证模板工怎么报名才不会被中介坑

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？