mcpField
V
vue

vue

github.com/liangmiqwq开发139 次安装2 天前更新
代码仓库

关于 vue

Vue 技能资料面向 Vue 3.5 开发，整理 Composition API、响应式与组件功能的参考内容。它侧重 TypeScript 和 `<script setup>` 的开发方式。

主要功能

  1. 01Composition API 用法
  2. 02响应式 API 与生命周期
  3. 03`<script setup>` 和宏
  4. 04内置组件与指令

适用场景

  1. 01编写 Vue 3.5 组件
  2. 02处理响应式状态与生命周期
  3. 03使用 TypeScript 定义组件属性和事件
  4. 04查阅内置组件与指令用法

安装

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

$npx skills add https://github.com/liangmiqwq/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