skillhub-181-vue
wehub-skill-sync
104 行
4.9 KiB
Markdown
104 行
4.9 KiB
Markdown
---
|
||
name: vue
|
||
description: 编辑 .vue 文件、创建 Vue 3 组件、编写 composables 或测试 Vue 代码时使用——提供 Composition API 模式、props/emits 最佳实践、VueUse 集成以及响应式解构指导
|
||
license: MIT
|
||
---
|
||
|
||
# Vue 3 开发
|
||
|
||
Vue 3 Composition API 模式、组件架构和测试实践的参考指南。
|
||
|
||
**当前稳定版：** Vue 3.5+，具备增强的响应式性能（内存占用减少 56%，数组追踪速度提升 10 倍）、新的 SSR 功能以及改进的开发体验。
|
||
|
||
## 概述
|
||
|
||
Vue 3 项目的渐进式参考系统。仅加载与当前任务相关的文件，以尽量减少上下文占用（基础约 250 tokens，每个子文件 500-1500 tokens）。
|
||
|
||
## 何时使用
|
||
|
||
**在以下场景使用本技能：**
|
||
|
||
- 编写 `.vue` 组件
|
||
- 创建 composables（`use*` 函数）
|
||
- 构建客户端工具
|
||
- 测试 Vue 组件/composables
|
||
|
||
**在以下场景应使用 `nuxt` 技能：**
|
||
|
||
- 服务端路由、API 端点
|
||
- 基于文件的路由、中间件
|
||
- Nuxt 特有的模式
|
||
|
||
**对于样式化 UI 组件：** 使用 `nuxt-ui` 技能
|
||
**对于无头无障碍组件：** 使用 `reka-ui` 技能
|
||
**对于 VueUse composables：** 使用 `vueuse` 技能
|
||
|
||
## 快速参考
|
||
|
||
| 正在处理... | 加载文件 |
|
||
| ------------------------ | ----------------------------- |
|
||
| `components/` 中的 `.vue` 文件 | references/components.md |
|
||
| `composables/` 中的文件 | references/composables.md |
|
||
| `utils/` 中的文件 | references/utils-client.md |
|
||
| `.spec.ts` 或 `.test.ts` 文件 | references/testing.md |
|
||
| TypeScript 模式 | references/typescript.md |
|
||
| Vue Router 类型 | references/router.md |
|
||
| 响应式（ref, watch） | references/reactivity.md |
|
||
| 自定义指令 | references/directives.md |
|
||
| Provide/inject | references/provide-inject.md |
|
||
| 边界情况、vue-tsc | references/gotchas.md |
|
||
|
||
## 加载文件
|
||
|
||
**根据你的任务考虑加载以下参考文件：**
|
||
|
||
- [ ] [references/components.md](references/components.md) - 如果在 `components/` 中工作或编写 `.vue` 文件
|
||
- [ ] [references/composables.md](references/composables.md) - 如果正在创建 composables（`use*` 函数）
|
||
- [ ] [references/utils-client.md](references/utils-client.md) - 如果在 `utils/` 中工作或编写客户端工具
|
||
- [ ] [references/testing.md](references/testing.md) - 如果正在编写 `.spec.ts` 或 `.test.ts` 文件
|
||
- [ ] [references/typescript.md](references/typescript.md) - 如果正在使用 Vue TypeScript 模式或泛型
|
||
- [ ] [references/router.md](references/router.md) - 如果正在使用 Vue Router 或路由类型
|
||
- [ ] [references/reactivity.md](references/reactivity.md) - 如果正在使用 ref、reactive、computed、watch 或 watchEffect
|
||
- [ ] [references/directives.md](references/directives.md) - 如果正在创建或使用自定义指令
|
||
- [ ] [references/provide-inject.md](references/provide-inject.md) - 如果正在使用 provide/inject 模式
|
||
- [ ] [references/gotchas.md](references/gotchas.md) - 如果正在调试边界情况或水合问题
|
||
|
||
**不要一次性加载所有文件。** 只加载与当前任务相关的内容。
|
||
|
||
## 快速开始
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
const { count = 0 } = defineProps<{ count?: number }>()
|
||
const emit = defineEmits<{ update: [value: number] }>()
|
||
</script>
|
||
|
||
<template>
|
||
<button @click="emit('update', count + 1)">
|
||
计数：{{ count }}
|
||
</button>
|
||
</template>
|
||
```
|
||
|
||
## 可用指南
|
||
|
||
**[references/components.md](references/components.md)** - 带有响应式解构的 Props、emits 模式、用于 v-model 的 defineModel、插槽简写
|
||
|
||
**[references/composables.md](references/composables.md)** - Composition API 结构、VueUse 集成、生命周期钩子、异步模式、响应式陷阱
|
||
|
||
**[references/utils-client.md](references/utils-client.md)** - 纯函数、格式化器、验证器、转换器、何时不应使用 utils
|
||
|
||
**[references/testing.md](references/testing.md)** - Vitest + @vue/test-utils、组件测试、composable 测试、路由模拟
|
||
|
||
**[references/typescript.md](references/typescript.md)** - 用于 provide/inject 的 InjectionKey、vue-tsc 严格模板、tsconfig 设置、泛型组件
|
||
|
||
**[references/router.md](references/router.md)** - 路由元数据类型、配合 unplugin-vue-router 的带类型参数、滚动行为、导航守卫
|
||
|
||
**[references/reactivity.md](references/reactivity.md)** - ref、reactive、computed、watch、watchEffect、响应式基础
|
||
|
||
**[references/directives.md](references/directives.md)** - 自定义指令钩子、v-focus、v-click-outside、v-tooltip 模式
|
||
|
||
**[references/provide-inject.md](references/provide-inject.md)** - InjectionKey 类型、应用级 provide、readonly 模式
|
||
|
||
**[references/gotchas.md](references/gotchas.md)** - 常见陷阱、vue-tsc 边界情况、水合问题、竞态条件（来自 vuejs-ai/skills）
|