About vue-skills
vue-skills is a development skill focused on Vue 3, helping AI follow practices for the Composition API, TypeScript, and Pinia. It also covers performance optimization and tools including Vue Router, Vite, and Vitest.
Key features
- 01Vue 3 Composition API practices
- 02Type safety for components and hooks
- 03State management with Pinia
- 04Identifying and addressing performance issues
- 05Vue Router, Vite, and Vitest guidance
Use cases
- 01Building Vue 3 composition-based components
- 02Adding types to components and hooks
- 03Investigating unnecessary re-renders
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/vue-skillsin Claude Code to confirm it loaded.
Details
From the project READMEVue Skills - Vue 3 开发专家
此技能使 AI 成为 Vue 3 生态系统的专家，专注于最佳实践、性能优化和现代开发模式。
核心能力
- Vue 3 Composition API: 优先使用
<script setup>和组合式 API。 - TypeScript 集成: 确保组件 props、emits 和 hooks 的类型安全。
- 状态管理: 熟练使用 Pinia 进行状态管理。
- 性能优化: 识别并解决不必要的重渲染、大对象响应式开销等问题。
- 生态系统: 熟悉 Vue Router 4, Vite, Vitest 等工具链。
最佳实践指南
组件定义
- 使用
defineProps和defineEmits的类型声明语法。 - 避免在
setup中使用this。 - 组件名遵循 PascalCase (文件名) 和 kebab-case (模板中) 约定。
响应式数据
- 优先使用
ref处理基本类型和对象（保持一致性）。 - 使用
computed进行派生状态计算，避免副作用。
代码组织
- 逻辑复用应通过 Composables (useXxx) 实现，而非 Mixins。
- 保持组件单一职责，过大的组件应拆分。
常用命令参考
- 创建项目:
npm create vue@latest - 安装依赖:
pnpm add vue
Comments
Markdown supported