vue3-frontend

Vue 3 Frontend Development Skill 是一个面向 Vue 3 前端开发的综合性技能包，主要在使用场景上覆盖新项目与组件的开发、代码迁移、代码审查与优化等任务。当需要开发 Vue 3 应用、组件或 composables 时，可以使用该技能。

一、用途 该技能用于支持 Vue 3 前端开发工作，包括创建新的 Vue 3 项目与组件、开发 composables、从 Vue 2 迁移到 Vue 3，以及检查和优化 Vue 3 代码质量。

二、主要能力

1. 组件开发：使用 <script setup> 语法和 Composition API 创建新的 Vue 3 组件。提供的模板包括：assets/component-templates/BasicComponent.vue（基本元件范本）、assets/component-templates/FormComponent.vue（完整的表单元件，含验证）、assets/component-templates/DataTable.vue（数据表格元件，含排序、分页、搜索）、assets/component-templates/Modal.vue（模态框元件）。 使用方式示例：cp assets/component-templates/BasicComponent.vue src/components/YourComponent.vue

2. Composables 开发：创建可重用的逻辑抽象。提供的模板包括：assets/composable-templates/useFetch.js（API 请求封装）、assets/composable-templates/useLocalStorage.js（localStorage 同步状态）。 使用方式示例：cp assets/composable-templates/useFetch.js src/composables/

3. Vue 2 到 Vue 3 迁移：协助将 Vue 2 项目迁移到 Vue 3。迁移工作流为：阅读 references/migration-guide.md 了解破坏性变更；识别现有代码中已废弃的 API；应用指南中的迁移模式；充分测试。关键迁移领域包括：全局 API（Vue.use → app.use）、响应式系统（Vue.set → 直接赋值）、v-model 语法（value/input → modelValue/update:modelValue）、生命周期钩子（destroyed → unmounted）、过滤器移除（使用 computed/methods）、Event Bus 替换（使用 mitt/Pinia）。

4. 代码检查与优化：审查清单包括：使用 <script setup> 以获得更好性能；正确使用 ref/reactive；computed 与 methods 的选择；v-show 与 v-if 的选择；v-for 中的 key 使用；组件拆分；props 验证；错误处理。

三、参考文档

• 迁移任务：references/migration-guide.md，包含完整的 Vue 2 到 Vue 3 迁移指南及所有破坏性变更。
• Composition API 使用：references/composition-api.md，包含 ref、reactive、computed、watch、生命周期等完整参考。
• 最佳实践：references/best-practices.md，覆盖组件设计、响应式、性能、代码组织、错误处理、TypeScript。
• 常见模式：references/common-patterns.md，覆盖表单处理、数据获取、列表渲染、模态框、状态管理、路由、i18n。 文档阅读时机：写组件前查看 best-practices.md 与 common-patterns.md；迁移前阅读完整 migration-guide.md 并参考 composition-api.md；实现功能时按主题查阅 common-patterns.md 对应章节（表单处理、数据获取、状态管理、i18n）。

四、常见开发工作流 工作流 1：创建新组件。选择合适模板；阅读最佳实践；复制并定制模板；遵循 PascalCase 命名规范；使用验证定义 props；使用 <script setup> 语法；保持组件专注且小。 工作流 2：将 Vue 2 代码迁移到 Vue 3。先阅读迁移指南；识别待迁移模式（Options API → Composition API、this.$set → 直接赋值、filters → computed/methods、Event Bus → mitt/Pinia）；系统化应用变更；逐个测试；更新依赖。 工作流 3：实现数据获取。查阅数据获取模式；选择方案（自定义 composable 的 useFetch 模板、VueUse（@vueuse/core）、TanStack Query）；实现错误处理与加载状态。 工作流 4：性能优化。查阅性能章节；检查问题（用 methods 代替 computed、不必要的 v-if、v-for 缺少 key、大组件未拆分、无懒加载）；应用优化（derived data 用 computed、频繁切换用 v-show、重组件用 defineAsyncComponent、大列表用虚拟滚动）。 工作流 5：表单开发。使用表单模板或 VeeValidate 模式；实现验证；处理错误与加载状态；添加成功/错误反馈。

五、快速参考命令 组件模板：ls -la assets/component-templates/；cp assets/component-templates/[TemplateName].vue src/components/ Composable 模板：ls -la assets/composable-templates/；cp assets/composable-templates/[composableName].js src/composables/ 阅读文档：view references/migration-guide.md；view references/composition-api.md；view references/best-practices.md；view references/common-patterns.md

六、最佳实践摘要 组件设计：始终使用 <script setup>；完整验证定义 props；用 composables 复用逻辑；保持组件小且专注（< 200 行）；将复杂逻辑抽取到 composables。 响应式：原始值用 ref()；对象用 reactive()；派生数据用 computed()；需要旧值时用 watch()；自动依赖跟踪用 watchEffect()。 性能：模板计算用 computed() 而非 methods；频繁切换用 v-show；初始渲染条件用 v-if；v-for 始终使用唯一 key；用 defineAsyncComponent() 懒加载重组件；大列表使用虚拟滚动。 代码组织：src/ 下包含 assets（静态资源）、components（可复用组件：common 基础组件、layout 布局组件、features 功能组件）、composables（可复用逻辑）、stores（Pinia stores）、router（路由配置）、views（页面组件）、utils（工具函数）、services（API 服务）。 TypeScript 支持：使用接口定义 prop 类型；在 composables 中使用泛型；正确类型化 emits；必要时使用 defineComponent。

七、常见陷阱 解构响应式对象会丢失响应性，应使用 toRefs() 或直接访问属性；Vue 3 不需要 $set，直接修改即可；refs 忘记 .value（<script> 中需要 .value，<template> 中不需要）；原始值使用 reactive() 是错误做法，原始值用 ref()，对象用 reactive()；未清理副作用，应在 onBeforeUnmount() 中清理或使用 watchEffect() 清理。

八、附加资源 官方 Vue 3 文档：https://vuejs.org/；Vue 3 迁移指南：https://v3-migration.vuejs.org/；Composition API FAQ：https://vuejs.org/guide/extras/composition-api-faq.html；VueUse：https://vueuse.org/；Pinia：https://pinia.vuejs.org/。

九、限制与说明 该资料未提供收费、价格、平台支持范围等具体信息，暂未提供。