开篇介绍
在Cursor基础篇一中我们介绍了Cursor的基础配置内容
在Cursor基础篇二中我们介绍了如何配置好Rules
在Cursor基础篇三中我们介绍如何配置MCP以及常见的MCP和其作用
之前的内容，是介绍Cursor的基础配置。那么从本篇开始，我们从项目启动阶段开始一步步在项目中落地
项目启动阶段
我们可以明显发现一套好的规则文件，极大程度的影响着与Agent的对话效果。
我们虽然可以手写Rules文件，但往往会出现不知道具体该如何写，或者写出的内容，也可能不容易让Agent理解。所以建议大家利用Agent的能力，帮助我们基于项目架构、依赖生成Rules文件。但是生成的Rules文件的内容我们最好有一个模板文件，告诉Agent要安装这个模版文件生成Rules
模板规范的主要内容：
1、指定生成Rules的文件存放位置
2、指定生成的每个Rules需要包含标签、规则内容的等要求，具体模版文件如下：
---
description: How to add or edit Cursor rules in our project
globs:
alwaysApply: false
---
# Cursor Rules Location
How to add new cursor rules to the project
1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
.cursor/rules/
├── your-rule-name.mdc
├── another-rule.mdc
└── ...
2. Follow the naming convention:
- Use kebab-case for filenames
- Always use .mdc extension
- Make names descriptive of the rule's purpose
3. Directory structure:
PROJECT_ROOT/
├── .cursor/
│ └── rules/
│ ├── your-rule-name.mdc
│ └── ...
└── ...
4. Never place rule files:
- In the project root
- In subdirectories outside .cursor/rules
- In any other location
5. Cursor rules have the following structure:
---
description: Write a brief description of the purpose of the rule
globs: optional/path/pattern/**/*
alwaysApply: false
---
# Rule Title
Main content explaining the rule with markdown formatting.
1. Step-by-step instructions
2. Code examples
3. Guidelines
Example:
// Good example
function goodExample() {
// Implementation following guidelines
}
// Bad example
function badExample() {
// Implementation not following guidelines
}
6. Metadata requirements:
- **description**: 必须提供非空的描述，清晰说明规则的用途
- **globs**: 可选，指定规则应用的文件模式
- **alwaysApply**: 通常设置为false，除非需要全局应用
示例：
✅ 正确的元数据：
---
description: 进行日期与时间处理的最佳实践
globs:
alwaysApply: false
---
❌ 错误的元数据（description为空）：
---
description:
globs:
alwaysApply: false
---
7. 创建新规则文件时的注意事项：
- 确保提供有意义的description字段值，不能留空
- 使用适当的globs模式匹配相关文件类型
- 规则内容应清晰、具体，并提供示例
具体操作流程：
1、先把上面这个文件放在.cursor>rules目录下 可以命名为：cursor-template-rules.mdc
2、与Agent对话，示例：参考项目结构，在rules目录下生成一个project-structure.mdc用于项目目录结构规范和约定，规则描述不能为空。然后就会在项目中生成这个project-structure.mdc文件。
---
description: 项目结构规范与构建发布规范
globs:
alwaysApply: false
---
# 某某应用 - 项目结构规范
## 项目概览
某某应用应用是基于 Vue 3 + TypeScript + Vite 构建的多页面桌面启动器应用，主要包括xx和xx工具两个主要功能模块。
## 目录结构
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ ├── types/ # TypeScript 类型定义
│ ├── api/ # API 接口
│ │ ├── index.ts # API 模块加载器
│ │ ├── launcher.ts # API
│ │ └── translate.ts # API
│ ├── components/ # 公共组件
│ ├── views/ # 页面组件
│ │ ├── LauncherView.vue # 视图
│ │ └── translate/ # 相关视图
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由定义
│ ├── stores/ # Pinia 状态管理
│ │ └── app.ts # 应用全局状态
│ ├── utils/ # 工具函数
│ │ ├── bridge.ts # 客户端桥接
│ │ ├── bus.ts # 事件总线
│ │ ├── request.ts # 网络请求
│ │ └── index.ts # 工具函数集合
│ ├── plugins/ # 插件
│ ├── mock/ # 模拟数据
│ ├── main.ts # 主应用入口
│ ├── translate.ts # 翻译工具入口
│ └── App.vue # 主应用组件
├── index.html # 主应用 HTML 入口
├── translate.html # 翻译工具 HTML 入口
├── ai.html # AI 功能 HTML 入口
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖
## 多页面入口
项目采用多页面应用架构，主要入口包括：
- xx: `/` (index.html)
- xx工具: `/xx.html`
- xx: `/xx.html`
## 技术栈
- Vue 3.5.13
- Vue Router 4.5.0
- Pinia 3.0.1
- TypeScript 5.7.3
- Vite 6.0.x
- axios 1.7.x
## 主要功能模块
1. **xx模块**
- 负责应用主界面展示
- 与客户端进行交互
2. **xx模块**
- xx功能
- xx功能
3. **客户端交互**
- 通过 bridge 与客户端进行交互
- 支持客户端回调注册
## 构建与发布
- 开发环境: `pnpm run dev`
- 生产构建: `pnpm run build`
- 构建产物位于 `dist` 目录
- 支持模拟数据开发模式: `pnpm run dev:mock`
同时也建议大家在项目里包含一个index.mdc，规则索引文件，当其他人看到项目中的这个文件的时候，就可以了解当前项目包含哪些规则。index.mdc示例如下：
---
description: 规则文件索引和导航
globs:
alwaysApply: false
---
# Master Rule Index
This document serves as the central index for all active Cursor rules within this repository, organized by category. These rules define processes, structures, and guidelines for development.
## Core & General
Fundamental project structure, setup, and general development guidelines.
| Rule File | Description |
| :--------------------------------- | :---------------------------------------------------------- |
| @cursor-template-rule.mdc | How to add or edit Cursor rules in our project |
| @project-structure.mdc | Project structure and file organization guidelines |
| @bridge-rules.mdc | Client Bridge Specification |
| @git-format.mdc | Git usage and commit message guidelines |
## Frontend & UI
Guidelines for building user interfaces and handling frontend logic.
| Rule File | Description |
| :--------------------------------- | :---------------------------------------------------------- |
| @typescript-best-practices.mdc | TypeScript编码最佳实践规范和风格指南 |
| @vue3-best-practices.mdc | Vue3组件开发和Composition API最佳实践规范 |
| @code-formatting.mdc | 代码格式化和风格指南规范 |
## Features
Rules specific to major application features.
| Rule File | Description |
| :--------------------------------- | :---------------------------------------------------------- |
| @feature/xx.mdc | xx功能的技术实现规则和最佳实践 |
最终项目中的rules文件可以有很多，不过我们要注意的时候，每个规则文件的类型的使用。避免所有的请求都被应用到每次对话中，建议规则文件的类型选择 Agent Request
| cursor-template-rules.mdc | How to add or edit Cursor rules in our project | mdc 模版 |
|---|---|---|
| git.mdc | Git commit specifications | git提交规范 |
| hooks.mdc | React hooks | hooks函数规则 |
| index.mdc | Master Rule Index | 定义开发流程相关规则的索引。方便对项目中的规则有个清晰的了解 |
| installing-packages.mdc | How to install packages | 安装依赖 |
| project-structure.mdc | Project directory structure specifications and conventions | 项目结构 |
| ui-components.mdc | UI Components and Style Guide (Tailwind) | UI组件实现 |
| utilities.mdc | Util functions | 公共方法 |
| 其他等等..... |
业务开发时
需求出来以后，动手开发之前，可以基于需求功能/任务编写该feature的mdc。一是可以帮助开发人员梳理需求流程、同时也是帮助Agent理解需求。后面文章会讲解这部分的内容。
