vue

GitHub

基于 Vue 3.5+ 的 Skill,涵盖 Composition API、响应式系统、组件开发(Props/Slots/v-model)、TypeScript 集成及高级特性。推荐 script setup 和 ref 用法,用于构建高效 Vue 应用。

skills/vue/SKILL.md uni-helper/skills

触发场景

构建 Vue 组件 使用响应式 API (ref, reactive) 实现 Composition API 模式 Vue 类型安全开发

安装

npx skills add uni-helper/skills --skill vue -g -y
更多选项

不安装直接使用

npx skills use uni-helper/skills@vue

指定 Agent (Claude Code)

npx skills add uni-helper/skills --skill vue -a claude-code -g -y

安装 repo 全部 skill

npx skills add uni-helper/skills --all -g -y

预览 repo 内 skill

npx skills add uni-helper/skills --list

SKILL.md

Frontmatter
{
    "name": "vue",
    "metadata": {
        "author": "Anthony Fu",
        "source": "Generated from https:\/\/github.com\/vuejs\/docs, scripts located at https:\/\/github.com\/antfu\/skills",
        "version": "2026.1.28"
    },
    "description": "Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns."
}

Vue

The skill is based on Vue 3.5+, generated at 2026-01-28.

Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with <script setup> and TypeScript is the recommended approach for building Vue applications.

Core References

Topic Description Reference
Reactivity System ref, reactive, computed, watch, and watchEffect core-reactivity

Components

Topic Description Reference
Props Declare and validate component props with TypeScript components-props
Events (Emits) Emit custom events from components components-emits
Slots Pass template content to child components components-slots
v-model Two-way binding on custom components components-v-model
Lifecycle Hooks Run code at specific component lifecycle stages components-lifecycle

Features

Script Setup & TypeScript

Topic Description Reference
Script Setup Composition API syntactic sugar for SFCs features-script-setup
TypeScript Type-safe Vue components with Composition API features-typescript

Reusability

Topic Description Reference
Composables Encapsulate and reuse stateful logic features-composables
Custom Directives Low-level DOM manipulation directives features-directives
Template Refs Direct DOM and component instance access features-template-refs

Advanced

Topic Description Reference
Provide/Inject Dependency injection across component tree advanced-provide-inject
Async & Suspense Top-level await pitfalls, async components, Suspense advanced-async-suspense

Key Recommendations

  • Use <script setup lang="ts"> for all components
  • Prefer ref() over reactive() for declaring state
  • Use type-based prop declarations with interfaces
  • Use defineModel() for v-model (3.4+)
  • Destructure props reactively (3.5+) for cleaner code
  • Extract composables for reusable stateful logic

版本历史

  • 15909ff 当前 2026-07-24 12:22

同 Skill 集合

skills/pinia/SKILL.md
skills/uni-helper/SKILL.md
skills/uniapp/SKILL.md
skills/unocss/SKILL.md
skills/vite/SKILL.md
skills/vue-best-practices/SKILL.md
skills/vueuse-functions/SKILL.md
skills/web-design-guidelines/SKILL.md

元信息

文件数
0
版本
15909ff
Hash
f7e87056
收录时间
2026-07-24 12:22

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-08 06:02
浙ICP备14020137号-1 $访客地图$