mcpField
V
vue

vue

github.com/antfu开发6.0k36.0k 次安装6 天前更新
代码仓库

关于 vue

Vue 是用于构建界面的框架，此技能提供 Vue 3.5 相关的开发参考，面向 Vue 组件开发者。内容涵盖 Composition API、响应式机制、生命周期及内置组件。

主要功能

  1. 01Composition API 与宏
  2. 02响应式状态和计算属性
  3. 03侦听器与生命周期钩子
  4. 04内置组件和指令
  5. 05TypeScript 开发偏好

适用场景

  1. 01编写 Vue 单文件组件
  2. 02管理组件状态与响应更新
  3. 03使用生命周期钩子处理组件流程

安装

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

$npx skills add https://github.com/antfu/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，生成于 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