vue-skills

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue Skills - Vue 3 开发专家

Vue Skills - Vue 3 Development Expert

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

This skill enables AI to become an expert in the Vue 3 ecosystem, focusing on best practices, performance optimization, and modern development patterns.

核心能力

Core Competencies

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

Vue 3 Composition API: Prioritize the use of
```
<script setup>
```
and the Composition API.
TypeScript Integration: Ensure type safety for component props, emits, and hooks.
State Management: Proficient in using Pinia for state management.
Performance Optimization: Identify and resolve issues such as unnecessary re-renders, reactive overhead of large objects, etc.
Ecosystem: Familiar with toolchains like Vue Router 4, Vite, Vitest.

最佳实践指南

Best Practices Guide

组件定义

Component Definition

使用
```
defineProps
```
和
```
defineEmits
```
的类型声明语法。
避免在
```
setup
```
中使用
```
this
```
。
组件名遵循 PascalCase (文件名) 和 kebab-case (模板中) 约定。

Use the type declaration syntax of
```
defineProps
```
and
```
defineEmits
```
.
Avoid using
```
this
```
in
```
setup
```
.
Component names follow the conventions of PascalCase (file names) and kebab-case (in templates).

响应式数据

Reactive Data

优先使用
```
ref
```
处理基本类型和对象（保持一致性）。
使用
```
computed
```
进行派生状态计算，避免副作用。

Prioritize using
```
ref
```
for primitive types and objects (to maintain consistency).
Use
```
computed
```
for derived state calculations to avoid side effects.

代码组织

Code Organization

逻辑复用应通过 Composables (useXxx) 实现，而非 Mixins。
保持组件单一职责，过大的组件应拆分。

Logic reuse should be implemented through Composables (useXxx) instead of Mixins.
Keep components single-responsibility; overly large components should be split.

常用命令参考

Common Command Reference

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

Create project:
```
npm create vue@latest
```
Install dependencies:
```
pnpm add vue
```