mcpField
V
vue

vue

github.com/midudev开发7.0k57 次安装2 周前更新
代码仓库

关于 vue

这是一项基于 Vue 3.5 指引的 Vue 开发技能，面向 Vue 应用开发者，涵盖组合式 API、TypeScript、响应式、生命周期和内置组件。

主要功能

  1. 01组合式 API 指引
  2. 02优先使用 TypeScript
  3. 03响应式与生命周期参考
  4. 04内置组件和指令

适用场景

  1. 01组织 Vue 组件结构
  2. 02选择响应式 API
  3. 03使用生命周期钩子
  4. 04使用内置组件和指令

安装

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

$npx skills add https://github.com/midudev/autoskills --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，生成于 2026-09-25。始终使用带有 <script setup lang="ts"> 的组合式 API。

偏好

  • 优先使用 TypeScript，而非 JavaScript
  • 优先使用 <script setup lang="ts">，而非 <script>
  • 出于性能考虑，如果不需要深层响应式，则优先使用 shallowRef，而非 ref
  • 始终使用组合式 API，而非选项式 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