自已学习Cursor Skills Vue实现第一个例子

我来详细解释一下 Cursor Skills 到底是什么。

Cursor Skills 是什么？

Cursor Skills 是 Cursor 的一个智能功能 ，它让编辑器能够 "学习"并"记住" 你的编码习惯、项目规范、团队约定，然后在日常编码中自动应用这些知识。

核心概念：

就像给 Cursor 安装一个 "大脑扩展" ，让它不仅是一个代码编辑器，更是一个懂你项目、懂你团队、懂你习惯的 "结对编程伙伴"。

---

Cursor Skills 的具体表现形式

1. 规则文件（.cursorrules）

这是最主要的 Skills 实现方式：

# .cursorrules.mdc 文件示例
# 这个文件告诉 Cursor 你的项目规则

## 技术栈偏好
- 使用 TypeScript 而不是 JavaScript
- 使用 React 函数组件，避免类组件
- 使用 Tailwind CSS 进行样式

## 代码风格
- 函数命名：camelCase
- 组件命名：PascalCase
- 缩进：2个空格
- 使用单引号
- 每行不超过 80 字符

## 项目特定规则
- API 调用必须使用 `@/api` 中的封装函数
- 错误处理必须使用 try-catch
- 所有组件必须有 PropTypes/TypeScript 定义

2. 技能库的实际作用

当你在项目中设置了 Skills 后，Cursor 会：

自动应用规则：

你：@.cursorrules 创建一个登录表单
Cursor：? 自动生成使用 TypeScript + React + Tailwind 的代码
       ? 不会生成 JavaScript/类组件/内联样式

智能建议：

// 当你输入时，Cursor 会建议：
import { api } from '@/api'  // ? 符合规则
import axios from 'axios'    // ? 不会建议这个

代码审查：

Cursor：发现你使用了 `var`，建议改为 `const` 或 `let`
Cursor：这个组件缺少 PropTypes 定义

---

Cursor Skills 的常见类型

1. 技术栈技能

# Vue 3 技能
- 使用 Composition API
- 使用 `<script setup>` 语法
- 使用 Pinia 而不是 Vuex
- 使用 Vue Router 4

2. 团队规范技能

# 代码提交规范
- 提交信息格式：`type(scope): message`
- type: feat|fix|docs|style|refactor|test|chore
- 每次提交只做一件事

3. 架构模式技能

# 项目架构
- 使用 Clean Architecture
- 目录结构：domain / application / infrastructure / presentation
- 依赖规则：内层不依赖外层

4. 安全规范技能

# 安全要求
- 密码必须加密存储
- SQL 查询使用参数化
- XSS 防护：转义用户输入
- CORS 配置白名单

---

如何创建和使用 Cursor Skills

创建 Skills：

1. 项目级 ：创建 .cursorrules.mdc 在项目根目录
2. 全局级：放在用户配置目录（影响所有项目）
3. 团队共享：将规则文件加入 Git，团队统一

使用 Skills：

1. 自动应用：Cursor 读取规则后自动遵守
2. 显式引用 ：在聊天中使用 @.cursorrules
3. 覆盖规则：可以在特定文件中创建局部规则

---

实际案例：电商项目 Skills

# 电商项目开发规范

## 前端技能
### 技术栈
- Vue 3 + Composition API + TypeScript
- Element Plus UI 组件库
- Pinia 状态管理
- Axios 进行 HTTP 请求

### 组件规范
1. **页面组件**：放在 `src/views/`
   - 命名：`PageName.vue`
   - 职责：路由入口，组合业务组件

2. **业务组件**：放在 `src/components/business/`
   - 命名：`BusinessFeature.vue`
   - 职责：具体业务功能

3. **通用组件**：放在 `src/components/common/`
   - 命名：`CommonComponent.vue`
   - 职责：可复用 UI 组件

### API 调用规范
```typescript
// ? 正确做法
import { productApi } from '@/api/modules/product'

// 获取商品列表
const { data } = await productApi.getList(params)

// ? 禁止做法
import axios from 'axios'
axios.get('/api/product/list')

状态管理规范

1. 模块化 Pinia：每个业务模块一个 store
2. 命名规范 ：use{ModuleName}Store
3. 数据持久化：重要数据需要本地存储

样式规范

1. 使用 SCSS：支持变量、嵌套、混入
2. BEM 命名 ：block__element--modifier
3. 响应式设计：优先移动端

性能优化

1. 图片懒加载 ：使用 v-lazy
2. 组件懒加载：路由级别和组件级别
3. 代码分割：按路由分割 chunk
4. 缓存策略：API 请求合理缓存

错误处理

1. 全局错误拦截：在 axios 拦截器中

2. 用户友好提示：使用 Message 组件

3. 错误上报：重要错误上报到 Sentry

   ---

   Skills 与普通配置文件的区别

   特性	Cursor Skills	普通配置文件 (如 .eslintrc)
   理解能力	语义理解代码意图	仅语法检查
   生成能力	能生成符合规范的代码	只能检查现有代码
   学习能力	持续学习优化	静态规则
   上下文感知	理解项目整体架构	单文件检查
   智能建议	主动提供改进建议	被动报错

   ---

   Skills 的高级用法

   1. 条件规则

   # 条件规则
   如果文件路径包含 `/admin/`：
   - 需要权限验证
   - 日志记录更详细
   - 错误处理更严格
   
   如果文件是 `*.test.*`：
   - 测试覆盖率要求 90%+
   - 必须包含边界测试

2. 多层级规则

项目根目录：.cursorrules (通用规则)
  └── src/admin/.cursorrules (管理后台特殊规则)
  └── src/mobile/.cursorrules (移动端特殊规则)

3. 动态技能

# 根据代码库自动学习
- 分析现有代码模式
- 提取常见模式为技能
- 新代码生成时应用这些模式

---

总结：Cursor Skills 的本质

Cursor Skills = 项目知识库 + 编码规范 + 最佳实践 + AI 智能应用

它让 Cursor 从一个通用代码助手 变成你的专属项目专家：

1. 记住你：了解你的技术偏好
2. 了解项目：掌握项目架构和规范
3. 遵守规则：自动应用团队约定
4. 智能建议：提供上下文相关的建议
5. 质量保障：确保代码符合质量标准

简单说 ：Cursor Skills 就是 "教会 Cursor 如何为你和你的团队写代码"。