# Vue Frontend Dev > Use for implementing or repairing the Vue frontend of a web app with Vue 3, Vite, vue-router, Pinia, vue-i18n, Tailwind CSS v4. Use when this capability is needed. - Skill: `tomevault-io/vue-frontend-dev` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/vue-frontend-dev` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-frontend-dev/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/vue-frontend-dev --- # Vue Frontend Dev 在当前任务是“实现、重构或修复 Vue 前端”时使用这个 skill。 适用范围： - 使用 `Vue 3` 构建前端页面和交互 - 使用 `Vite` 作为开发与构建入口 - 使用 `vue-router` 组织页面路由 - 使用 `Pinia` 管理前端状态 - 使用 `vue-i18n` 组织多语言文案 - 使用 `Tailwind CSS v4` 构建设计系统与页面样式 不适用范围： - 后端 API、数据库、鉴权服务或 Ignis service 本身的实现 - 产品需求整理或前端设计文档撰写 - 纯设计讨论但不涉及实际前端开发 ## 输出目标 根据已有需求和设计文档，实现可运行的 Vue 前端，并与已有后端能力对接。 默认输入来源： - 产品需求：`.dev/prd_doc.md` - 前端设计：`.dev/frontend_design_doc.md` ## 技术基线 默认技术栈如下，除非仓库已有明确约束且与之冲突： - `Vue 3` - `Vite` - `vue-router` - `Pinia` - `vue-i18n` - `Tailwind CSS v4` ## 工作流程 1. 先读取 `.dev/prd_doc.md`，确认页面范围、用户流程、语言和平台约束。 2. 再读取 `.dev/frontend_design_doc.md`，把设计说明转为实际页面结构、组件层级和样式实现。 3. 盘点当前仓库已有前端结构，优先延续已有目录、命名和工程约定。 5. 与后端实际能力对接，不要凭空假设 API 形状；不明确时从现有代码或已生成服务中确认。 6. 构建并验证前端可运行，必要时修复构建或路由问题。 ## 工作规则 - 把 `.dev/prd_doc.md` 当作“产品边界”的事实来源。 - 把 `.dev/frontend_design_doc.md` 当作“页面和交互细节”的事实来源。 - 页面实现优先还原设计中的布局、层级、状态、最少文案和交互反馈。 - 优先建立清晰的页面级结构，而不是过早抽象复杂组件体系。 - 多语言文案统一走 `vue-i18n`，不要把用户可见文本散落在页面里。 - 页面导航和受保护路由统一通过 `vue-router` 组织。 - 前端共享状态统一通过 `Pinia` 管理，不要到处堆局部全局变量。 - 样式统一使用 `Tailwind CSS v4`；避免内联样式和分散的临时视觉规则。 - 如果需求包含登录态、用户资料或会话信息，前端以真实登录流为准，不自行发明另一套认证入口。 ## 实现重点 ### 路由 - 为每个核心页面建立明确路由。 - 区分公开页面、登录后页面和错误页 / 兜底页。 - 若设计文档包含详情页、结果页、空状态页或引导页，需要在路由层体现出来。 ### 状态 - 把会话、用户信息、核心业务状态、全局 UI 状态放入清晰的 Pinia store。 - 不要让页面之间通过隐式副作用共享数据。 ### 国际化 - 默认把主要导航、按钮、标题、状态提示纳入 `vue-i18n`。 - 若需求明确为单语言，仍保持结构可扩展，不要把文案写死到难以迁移。 ### 样式与布局 - 以设计文档定义的颜色、圆角、阴影、间距和信息层级为准。 - 优先建立页面壳层、内容区、关键卡片和交互控件的稳定视觉规则。 - 不要把页面做成通用后台模板观感，除非需求本身就是后台系统。 ## 质量标准 - 页面、路由、状态和样式实现与 `.dev/prd_doc.md`、`.dev/frontend_design_doc.md` 一致 - 前端技术栈符合本 skill 的基线或仓库既有约束 - 文案组织清晰，可见文本没有无序散落 - 至少完成一次构建或等价验证；如果无法验证，需要明确指出阻塞点 --- > Source: [igniscloud/web-fullstack-workflow](https://github.com/igniscloud/web-fullstack-workflow) — distributed by [TomeVault](https://tomevault.io).