大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



大家好，我是鱼樱！！！最近一直忙项目，赚钱为主！！今天给大家分享一个时下超级有用的文章

关注公众号持续分享更多前端和AI辅助前端编码新知识~~

写点笔记写点生活~写点经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域以及产品化思维找到突破口。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Cursor Rules，中文翻译过来是 Cursor 规则。就是给Cursor制定一系列规则，约束AI生成的代码。

当一条规则被触发后，规则中的内容会被附加到提示词中，为 AI 提供参考，无论是在自动补全、代码生成、重构还是错误修复时都能遵循这些规范。

在 Cursor 当中，支持两种级别的规则：

• 全局规则（User Rules） ：针对所有项目通用的规则
• 项目规则（Project Rules） ：存放于项目目录下的  中，只用于约束当前项目。

比如输入 让系统自动生成规则

马上生成对应的规则

Component Structure

• Use the Composition API with syntax
• Use PascalCase for component names (e.g., )
• Use Single File Components (SFC) structure
• Organize imports by type (Vue core, third-party libraries, internal imports)

TypeScript Usage

• Define proper interfaces and types for all data structures
• Use type annotations for function parameters and return types
• Leverage TypeScript’s advanced features (generics, utility types, etc.)
• Avoid using type; use proper typing or when necessary

Composition Hooks

• Name custom hooks with prefix (e.g., )
• Keep hooks focused on a single responsibility
• Return reactive data to maintain reactivity in consuming components
• Document hook parameters and return values with JSDoc comments

State Management (Pinia)

• Create modular stores for different domains
• Use with the composition API style
• Define proper state types
• Use actions for async operations
• Use getters for derived state

API Calls

• Organize API calls by domain/entity
• Use axios or fetch with proper error handling
• Define response and request types
• Implement interceptors for common operations (auth, error handling)

Routing

• Use named routes
• Implement lazy loading for route components
• Use route guards for authentication/authorization
• Group routes by features or domains

Style Guidelines

• Use Less for CSS preprocessing
• Follow BEM methodology for class naming
• Use variables for colors, spacing, and typography
• Prefer scoped styles unless global styles are needed

Performance Optimization

• Use properties for derived values
• Use for frequent toggles, for conditional rendering
• Implement for code splitting
• Use for components that should maintain state
• Add key attributes to v-for loops with unique values

Error Handling

• Implement global error handling
• Use try/catch for async operations
• Display user-friendly error messages
• Log errors for debugging purposes

Testing

• Write unit tests for components and hooks
• Write integration tests for critical user flows
• Use Vitest or Jest for unit testing
• Use Testing Library or Cypress for component/e2e testing

• Separate Three.js logic into dedicated hooks/services
• Clean up Three.js resources when components unmount
• Use ref to access DOM elements for canvas mounting
• Optimize rendering cycles and resource usage

• Add JSDoc comments to functions, hooks, and components
• Document component props, events, and slots
• Keep README and other documentation up-to-date
• Document complex business logic and architectural decisions

- - 全局规则（User Rules） ‌：通过配置，适用于所有项目，例如强制中文输出或通用编码规范。‌‌‌‌

User Rules是全局性的，适用于用户本地 Cursor 环境下的所有项目 。

它们在 Cursor 的设置中以纯文本格式定义，不支持 .mdc 格式 。

用户规则通常用于设定全局偏好，例如期望 AI 回复的语言风格、语气，或者个人常用的编码习惯和原则。

.mdc 文件格式，是一种轻量级格式，本质上来讲就是一个Markdown文件

- - ‌项目规则（Project Rules） ‌：存储在.tsx`文件应用React规范）。‌‌

Cursor 支持四种规则类型：

• Always：始终应用规则
• Auto Attached：当匹配  模式的文件被引用时自动附加规则
• Agent Requested：根据 AI 代理的判断决定是否应用规则，需要提供规则说明
• Manual：仅在提示中显式使用  时附加规则。

如果你想手动调用规则，用 ；想自动触发用 ；想始终生效用 ；想让 AI 自己决定是否用，就用 

对应的 mdc 文件下您可以自定义配置各种**实践编码（依据偏好，市面规则、官方建议、项目**实践等约束）

- - 官方已弃用旧版.cursor/rules/*.mdc`模块化配置

要充分发挥 Cursor 规则的效果，需要编写简洁、明确的规则并在 Prompt 中正确调用。以下是一些实践建议：

• 规则简洁具体：  保持规则简洁，控制在 300 - 500 行以内是一个不错的建议
• 拆分复杂任务：  将复杂的任务拆分为多个可组合的小规则
• 使用示例与代码片段：  在有帮助的情况下提供具体示例或引用的文件
• 在提示中引用规则：  当需要时，可以在聊天提示中使用  来手动应用特定规则。
• 尽可能清晰：  避免模糊的指导。编写规则的方式应像写一份清晰的内部文档
• 及时更新：  当你发现自己在对话中重复强调某个事情时，可以将其编写成一条规则
• 团队协作：  团队内共享同一份规则，定期与团队讨论和更新，确保它们与当前代码**实践保持一致。

本项目基于 Vue 3、Vue Router、typescript、threejs 和 pinia 构建，适用于中大型管理类项目。项目使用 进行脚手架搭建，支持现代前端开发流程。

基础规则

• 使用 Composition API：在组件中使用 Vue 3 的 Composition API 来组织逻辑。
• 组件名使用 PascalCase：所有组件名应使用 PascalCase 格式，例如 。
• Props 定义使用 ：使用 来定义组件的 props。
• 事件使用 ：使用 来定义和触发组件事件，确保事件名称清晰且具有描述性给上备注。
• 方法名jsdoc备注好方法用途。
• 创建组件 语法less预处理器 。

目录结构

组合式函数规范

• 以 开头命名：所有组合式函数应以 开头命名，例如 。
• 一个函数只做一件事：确保每个组合式函数只负责一个功能，避免功能混杂。
• 返回响应式数据：返回值应为响应式数据，以便在组件中直接使用。
• 注意依赖收集：确保在组合式函数中正确收集依赖，以便响应式更新。

性能优化

• 合理使用 ：使用 来缓存计算结果，避免不必要的重新计算。
• vs ：在需要频繁切换显示状态时，优先使用 ，以减少 DOM 操作。
• 使用 ：对于大型组件，使用 进行懒加载，减少初始加载时间。
• 缓存：使用 来缓存不需要频繁销毁的组件，提升性能。

当然其他技术栈项目也是一样的，这个完全取决于您个人习惯结合所属技术栈的**实践来配置

当然这个也是依据用户个人喜好以及市面标准结合**实践来配置的，没有绝度值说法

接下来聊聊 mcp 这个事情和概念

‌Cursor MCP 指集成在 Cursor 代码编辑器中的模型上下文协议（Model Context Protocol, MCP），该协议由 Anthropic 推出，旨在实现大语言模型与外部工具的无缝交互‌。通过 MCP，Cursor 能够突破传统代码补全限制，直接调用本地和云端工具完成复杂操作，例如文件转换、数据抓取、版本控制等。‌‌

MCP 的核心功能与价值‌

---

‌双向连接机制‌：

---

支持 LLM 主动调用本地开发工具（如 Git、Node.js 模块）和第三方 API（如 Replicate 图像生成）。‌‌

允许工具服务向模型推送实时反馈数据（如数据库查询结果、系统命令执行日志）。‌‌

---

‌在 Cursor 中的典型应用场景‌：

---

文档自动化处理：通过调用 Markdown2PDF 工具将对话记录转为 PDF 文件。‌‌

依赖管理：实时查询项目依赖包最新版本并提供升级建议。‌‌

跨平台操作：直接执行 GitHub 命令或调用 Blender 进行 3D 建模。‌‌

---

‌技术实现方式‌：

---

通信协议：支持 SSE（Server-Sent Events）和 stdio（标准输入输出）两种模式。‌‌

配置流程：需在 Cursor 设置中添加 MCP 服务器地址或本地可执行命令。‌‌

‌开发者生态价值‌：

---

标准化接口降低接入成本，开发者可快速发布 npm 包形式的 MCP 服务组件。‌‌

通过协议层安全机制（如沙盒执行环境）保障敏感操作可控性。‌‌

MCP是一种开放协议，它标准化了应用程序向LLM提供上下文的方式。可以将 MCP 视为 AI 应用程序的 USB-C 端口。正如 USB-C 提供了一种将设备连接到各种外围设备和配件的标准化方式一样，MCP 提供了一种将 AI 模型连接到不同数据源和工具的标准化方式。（MCP的全称是Model Context Protocol，是一个开放协议，它使 LLM 应用与外部数据源和工具之间的无缝集成成为可能。无论你是构建 AI 驱动的 IDE、改善 chat 交互，还是构建自定义的 AI 工作流，MCP 提供了一种标准化的方式，将 LLM 与它们所需的上下文连接起来。）

MCP 是 Claude (Anthropic) 主导发布的一个开放的、通用的、有共识的协议标准。

Function Calling

Function Calling 指的是 AI 模型根据上下文自动执行函数的机制。 Function Calling 充当了 AI 模型与外部系统之间的桥梁，不同的模型有不同的 Function Calling 实现，代码集成的方式也不一样。由不同的 AI 模型平台来定义和实现。

Model Context Protocol (MCP)

MCP 是一个标准协议，如同电子设备的 Type C 协议（可以充电也可以传输数据），使 AI 模型能够与不同的 API 和数据源无缝交互。 MCP 旨在替换碎片化的 Agent 代码集成，从而使 AI 系统更可靠，更有效。通过建立通用标准，服务商可以基于协议来推出它们自己服务的 AI 能力，从而支持开发者更快地构建更强大的 AI 应用。开发者也不需要重复造轮子，通过开源项目可以建立强大的 AI Agent 生态。 MCP 可以在不同的应用/服务之间保持上下文，从而增强整体自主执行任务的能力。

AI Agent

AI Agent 是一个智能系统，它可以自主运行以实现特定目标。传统的 AI 聊天仅提供建议或者需要手动执行任务，AI Agent 则可以分析具体情况，做出决策，并自行采取行动。 AI Agent 可以利用 MCP 提供的功能描述来理解更多的上下文，并在各种平台/服务自动执行任务。

推荐 mcp 网站

smithery-ai

mcp.so

MCP官方服务

cursor mcp

cursor mcp tools

检查MCP Server状态

在上述状态配置完成后，你可以退回到Cursor的MCP界面查看MCP状态。

每个MCP服务名称左侧的灯代表MCP的状态，红灯表示不可用，黄灯表示正在链接中，绿灯表示可用，无颜色表示你关闭了对应的MCP服务；

BugBot 自动审查 PR 自动分析 GitHub Pull Request，定位代码问题，自动生成评论建议。点击“Fix in Cursor”直接跳转一键修复！

后台智能体全量开放 支持代码补全、文件分析、环境配置，彻底后台托管，让你专注写逻辑！

Jupyter Notebook 原生支持 在编辑器中直接操作 Notebook 单元格（目前支持 Claude Sonnet），数据科学党狂喜！

项目级记忆功能（Memories）  让 Cursor 记住你的项目历史，上下文理解更智能！

MCP一键安装 自动配置开发环境，OAuth 授权一气呵成，0配置上线！

UI 全面升级 仪表盘、图表、统计数据一应俱全，对话界面支持 Mermaid 图、Markdown 表格。

个人使用的是商业号。。。支持所有模型所有cursor版本和白嫖的对比体验感拉满的。。

关于白嫖和付费完全取决于个人需要干什么，学什么，用在哪了。。。没有是非对错，但是尊重技术成果，总喜欢白嫖的思维和习惯总是不好的，滋养了白嫖思维容易捡了芝麻丢了西瓜。。最后请各位技术大咖拒绝负能拒绝不学无术拒绝思想不端正和心态爆炸的以及嘴喷人一起学习探讨，所有有价值含量的技术适当收费！！！