mcpField
V
vue

vue

github.com/hairyf开发26120 次安装4 周前更新
代码仓库

关于 vue

基于 Vue 3.5 的 Vue 技能，提供 Composition API、TypeScript、响应式、生命周期及内置功能方面的指导，面向开发 Vue 组件和应用的开发者。

主要功能

  1. 01Composition API 与 script setup 指导
  2. 02TypeScript 使用建议
  3. 03响应式与生命周期 API 参考
  4. 04内置组件和指令模式

适用场景

  1. 01使用 script setup 编写 Vue 组件
  2. 02为应用状态选择响应式 API

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hairyf/skills --skill vue

安装后在 Claude Code 中输入/vue确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

GENERATION.md
references/
advanced-patterns.md
core-new-apis.md
script-setup-macros.md

详细介绍

Vue

基于 Vue 3.5。始终使用 Composition API 和 <script setup lang="ts">。

偏好

  • 优先使用 TypeScript，而不是 JavaScript
  • 优先使用 <script setup lang="ts">，而不是 <script>
  • 为提升性能，如果不需要深层响应性，优先使用 shallowRef，而不是 ref
  • 始终使用 Composition API，而不是 Options API
  • 不建议使用 Reactive Props Destructure

核心

主题描述参考
Script Setup 与宏<script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、泛型script-setup-macros
响应性与生命周期ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子、组合式函数core-new-apis

功能

主题描述参考
内置组件与指令Transition、Teleport、Suspense、KeepAlive、v-memo、自定义指令advanced-patterns

快速参考

组件模板
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>
关键导入
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

评论

支持 Markdown