mcpField
V
vue

vue

github.com/onmax开发7238.0k 次安装1 天前更新
代码仓库

关于 vue

面向 Vue 3 开发的参考技能，整理 Composition API、响应式状态与组件模式，帮助编写符合项目偏好的代码。

主要功能

  1. 01Vue 3.5 开发指导
  2. 02Composition API 与生命周期
  3. 03响应式 API 参考
  4. 04内置组件与指令模式

适用场景

  1. 01编写 Vue 单文件组件
  2. 02选择响应式状态 API
  3. 03实现组件生命周期逻辑

安装

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

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

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

包含的文件

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

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

详细介绍

Vue

基于 Vue 3.5，生成于 2026-09-25。始终使用 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