关于 vue
面向界面开发者的 Vue 3.5+ 技能，涵盖响应式、组件、TypeScript 与可复用逻辑，也涉及依赖注入和异步组件。
主要功能
- 01响应式系统与生命周期钩子
- 02组件属性、事件与插槽
- 03Composition API 与 TypeScript
- 04组合式函数与自定义指令
- 05依赖注入
- 06异步组件与 Suspense
适用场景
- 01管理应用响应式状态
- 02定义可复用的 Vue 组件
- 03用组合式函数共享有状态逻辑
- 04构建异步组件流程
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdLICENSE.mdSYNC.mdreferences/advanced-async-suspense.mdadvanced-provide-inject.mdcomponents-emits.mdcomponents-lifecycle.mdcomponents-props.mdcomponents-slots.mdcomponents-v-model.mdcore-reactivity.mdfeatures-composables.mdfeatures-directives.mdfeatures-script-setup.mdfeatures-template-refs.mdfeatures-typescript.md详细介绍
Vue
此技能基于 Vue 3.5+，生成于 2026-01-28。
Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。它基于标准的 HTML、CSS 和 JavaScript，并提供直观的 API 和一流的文档。推荐使用带有 <script setup> 和 TypeScript 的组合式 API 来构建 Vue 应用。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 响应式系统 | ref、reactive、computed、watch 和 watchEffect | core-reactivity |
组件
| 主题 | 描述 | 参考 |
|---|---|---|
| Props | 使用 TypeScript 声明并验证组件 props | components-props |
| 事件（Emits） | 从组件发出自定义事件 | components-emits |
| 插槽 | 将模板内容传递给子组件 | components-slots |
| v-model | 自定义组件上的双向绑定 | components-v-model |
| 生命周期钩子 | 在组件生命周期的特定阶段运行代码 | components-lifecycle |
功能
Script Setup 与 TypeScript
| 主题 | 描述 | 参考 |
|---|---|---|
| Script Setup | SFC 的组合式 API 语法糖 | features-script-setup |
| TypeScript | 使用组合式 API 构建类型安全的 Vue 组件 | features-typescript |
可复用性
| 主题 | 描述 | 参考 |
|---|---|---|
| Composables | 封装并复用有状态逻辑 | features-composables |
| 自定义指令 | 低级 DOM 操作指令 | features-directives |
| 模板引用 | 直接访问 DOM 和组件实例 | features-template-refs |
高级主题
| 主题 | 描述 | 参考 |
|---|---|---|
| Provide/Inject | 在组件树中进行依赖注入 | advanced-provide-inject |
| 异步与 Suspense | 顶层 await 的注意事项、异步组件、Suspense | advanced-async-suspense |
关键建议
- 对所有组件使用
<script setup lang="ts"> - 声明状态时优先使用
ref()，而非reactive() - 使用基于类型的 prop 声明，并搭配接口
- v-model 使用
defineModel()（3.4+） - 以响应式方式解构 props（3.5+），让代码更简洁
- 提取 composables，以复用有状态逻辑
评论
支持 Markdown