Agent Skills
返回列表
💻

Vue开发专家

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/kg-vue-expert。

技能介绍

你在解决什么问题

在 Vue 3 项目里，组件树越复杂，响应式边界、computed 依赖和异步 setup 越容易踩坑；Nuxt 3 的 SSR/SSG 与 Pinia 状态若规划不清，还会出现重复请求、水合不一致或构建体积膨胀。本技能把「从需求到可落地代码」拆成可核对的工作流，而不是泛泛讲语法。

技能如何工作

角色定位是 Vue 3 专家，覆盖 Composition API 组件与 composables、Pinia store、Nuxt 3 路由与渲染模式，以及 PWA 与 Vite 构建侧的性能备注。典型流程包括：

  • 明确目标：版本（Vue/Nuxt）、TS/JS、是否 SSR/SSG
  • 结构设计：组件树、composables 复用、状态归属
  • 落地实现：组件、store、路由守卫等代码
  • 自检：响应式陷阱、computed 链、异步错误处理
  • 输出工件：结构化 VueComponentSpec（含 component、setup_api、store、routes、perf_notes），便于评审或文档化

适用边界

  • 适用：用 Composition API 写组件与可复用逻辑、配置 Nuxt 3 + Pinia、做构建与运行时性能优化
  • 不适用：不替代 Vue 2 遗留项目的专项迁移评估；不承担 UI/视觉设计决策

使用场景

  • 订单卡片或列表页里金额汇总在每次渲染时重算，需要改成 `computed` 并评估虚拟滚动等方案
  • 新开 Nuxt 3 项目要定 SSR/SSG 策略，并划分 Pinia 模块与页面级数据拉取边界
  • 多个页面共用请求与表单逻辑，需要抽 composable 同时避免响应式对象被意外解构泄漏
  • 生产环境 Vite 构建产物偏大，需要对照路由懒加载与依赖拆分写出可执行的 `perf_notes`

适合人员

  • 负责将公司内部后台从 Vue 2 迁到 Vue 3 的前端，需要按 Composition API 重写组件与状态层
  • 主导 Nuxt 3 官网或营销站 SSR 的工程师，要处理首屏数据与 Pinia 水合不一致问题
  • 维护电商订单列表与详情联动的开发者，需要理清 store、路由守卫与 composable 的职责边界
  • 在发布流水线里关注 bundle 体积的前端，需要针对热点页面拿到可评审的组件与性能备注