mcpField
V
vue-skills

vue-skills

github.com/yangyunfu-ht开发045 次安装39 周前更新
代码仓库

关于 vue-skills

vue-skills 是面向 Vue 3 开发的技能，帮助 AI 遵循组合式 API、TypeScript 和 Pinia 等实践。内容还涉及性能优化及 Vue Router、Vite、Vitest 等工具链。

主要功能

  1. 01Vue 3 Composition API 实践
  2. 02组件与 hooks 的 TypeScript 类型安全
  3. 03使用 Pinia 管理状态
  4. 04识别并优化性能问题
  5. 05涵盖 Vue Router、Vite、Vitest

适用场景

  1. 01编写 Vue 3 组合式组件
  2. 02为组件和 hooks 添加类型
  3. 03排查不必要的重渲染

安装

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

$npx skills add https://github.com/yangyunfu-ht/development-note --skill vue-skills

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

详细介绍

来自项目 README

Vue Skills - Vue 3 开发专家

此技能使 AI 成为 Vue 3 生态系统的专家，专注于最佳实践、性能优化和现代开发模式。

核心能力

  1. Vue 3 Composition API: 优先使用 <script setup> 和组合式 API。
  2. TypeScript 集成: 确保组件 props、emits 和 hooks 的类型安全。
  3. 状态管理: 熟练使用 Pinia 进行状态管理。
  4. 性能优化: 识别并解决不必要的重渲染、大对象响应式开销等问题。
  5. 生态系统: 熟悉 Vue Router 4, Vite, Vitest 等工具链。

最佳实践指南

组件定义
  • 使用 defineProps 和 defineEmits 的类型声明语法。
  • 避免在 setup 中使用 this。
  • 组件名遵循 PascalCase (文件名) 和 kebab-case (模板中) 约定。
响应式数据
  • 优先使用 ref 处理基本类型和对象（保持一致性）。
  • 使用 computed 进行派生状态计算，避免副作用。
代码组织
  • 逻辑复用应通过 Composables (useXxx) 实现，而非 Mixins。
  • 保持组件单一职责，过大的组件应拆分。

常用命令参考

  • 创建项目: npm create vue@latest
  • 安装依赖: pnpm add vue

评论

支持 Markdown