RulePilot：AI编辑器规范制定核心索引
在团队开发中，「规范」是效率的基石，但零散的规范文档常常让我们陷入「找半天」的困境。这份索引整合了所有技术规范的核心入口，按场景、技术栈、优先级等多维度分类，帮你10秒定位所需内容，从此告别规范查询焦虑。
📌 索引信息 版本：v1.0 最后更新：2025-11-21 适用范围：前端团队全流程开发
🎯 一、按场景快速导航
从项目启动到上线运维，每个阶段的规范都已为你整理就绪
🤖 AI 协作 & 项目管理
- 《AI 辅助开发指南》→ 戳此看 AI 协作核心方法论
- 《项目上下文》→ 快速掌握项目背景与架构全貌
- 《技术评估指南》→ 技术选型不再迷茫的决策工具
- 《架构决策记录》→ 追溯 ADR 决策的来龙去脉
🆕 新项目启动
- 《项目设置规范》→ 初始化配置一步到位
- 《Git 分支管理》→ 清晰的分支策略避免混乱
- 《依赖安装规范》→ 包管理的避坑指南
- 《架构模式规范》→ 从起步就走对架构路线
💻 日常开发核心
- 《Vue 3 组件规范》→ 组件开发的统一标准
- 《TypeScript 规范》→ 类型定义的最佳实践
- 《Composables 规范》→ 可复用逻辑的设计模式
- 《样式规范》→ CSS/Tailwind 书写指南
- 《命名规范》→ 变量/函数命名的统一准则
🔒 安全开发防线
- 《安全规范总览》→ 安全开发的入口手册
- 《XSS 防护》→ 跨站脚本攻击的防御技巧
- 《认证授权》→ Token 与权限管理方案
- 《API 安全》→ 搞定 CORS/CSRF 等安全问题
- 《数据安全》→ 数据加密与脱敏的实操方法
🐛 问题修复与优化
- 《错误处理规范》→ 统一的异常处理逻辑
- 《性能优化规范》→ 解决性能瓶颈的实用技巧
- 《性能诊断规范》→ 用好工具定位性能问题
📝 代码审查 & 部署
- 《代码质量工具》→ ESLint/Prettier 配置与使用
- 《Git 提交规范》→ 清晰的提交信息便于追溯
- 《文档编写规范》→ 代码注释与文档的书写标准
- 《部署上线清单》→ 性能与安全的最终检查项
🏗️ 二、按技术栈精准定位
聚焦核心技术栈，快速找到对应领域的规范细则
Vue 3 生态体系
| 规范文档 | 核心内容 | 优先级 |
|---|---|---|
| Vue 3 组件规范 | 组件开发全流程标准 | 🔴 P0 |
| Composables 模式 | 逻辑复用的设计方法 | 🔴 P0 |
| Pinia 状态管理 | 全局状态管理方案 | 🟠 P1 |
| Element Plus 使用 | UI 组件库最佳实践 | 🟠 P1 |
TypeScript 体系
| 规范文档 | 核心内容 | 优先级 |
|---|---|---|
| TypeScript 基础规范 | 类型定义与基础用法 | 🔴 P0 |
| 高级 TypeScript 技巧 | 泛型与工具类型实践 | 🟠 P1 |
其他常用技术栈
- 样式相关：CSS/Tailwind 规范（P0）、设计系统（P1）
- API 相关：API 设计规范（P1）、错误处理（P0）
- 表单/表格：表单验证（P1）、表格数据处理（P1）
- 国际化：i18n 规范（P1）
🎯 三、按优先级高效学习
按优先级规划学习路径，避免陷入规范海洋
🔴 P0 - 极高优先级（必须遵守）
项目基石，所有开发人员强制遵循
- 协作基础：AI 协作指南、项目上下文
- 开发核心：Vue 3 组件、TypeScript、Composables、样式规范
- 安全底线：安全总览、XSS 防护、认证授权、API 安全
- 工程规范：代码质量工具、Git 提交规范
🟠 P1 - 高优先级（强烈推荐）
提升开发质量的关键，进阶必备
- 决策支持：技术评估指南、架构决策记录
- 进阶开发：高级 TypeScript、Pinia 状态管理
- 安全进阶：数据安全、依赖安全
- 性能优化：性能优化、性能诊断
🟡 P2 - 中优先级（推荐使用）
辅助提升开发效率，按需学习
- API 设计、表单验证、表格处理、命名规范
- 模块导入导出、国际化规范
🔍 四、关键词速查（开发必备）
遇到具体问题？按关键词直接定位解决方案
Vue 开发高频问题
- 组件开发/Props/Emits/Slots → Vue 3 组件规范
- ref/reactive/computed → Vue 3 组件规范 + Composables 模式
- Pinia/Store 状态管理 → Pinia 规范
- Element Plus 使用 → Element Plus 规范
TypeScript 高频问题
- 基础类型定义 → TypeScript 基础规范
- 泛型/工具类型 → 高级 TypeScript 规范
安全与性能高频问题
- XSS/CSRF 防护 → 安全总览 + 对应专项规范
- 权限/认证 → 认证授权规范
- 性能优化/诊断 → 性能系列规范
- 数据加密/脱敏 → 数据安全规范
工程化高频问题
- Git 分支/提交 → Git 分支管理 + 提交规范
- ESLint/Prettier → 代码质量工具规范
- 依赖管理 → 依赖安装规范 + 依赖安全
📖 五、规范速查卡（直接复制用）
日常开发的「代码模板库」，减少重复思考
Vue 3 组件基础结构
<script setup lang="ts">
import type { PropType } from 'vue'
// Props 定义（规范写法）
const props = defineProps<{
modelValue: string
}>()
// Emits 定义（规范写法）
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>
👉 完整规范：《Vue 3 组件规范》
TypeScript 类型定义
// 接口与类型的规范使用场景
interface User { // 用于对象结构定义
id: number
name: string
}
type Status = 'active' | 'inactive' // 用于联合类型/字面量类型
👉 完整规范：《TypeScript 基础规范》
XSS 防护最简代码
import DOMPurify from 'dompurify'
// 安全渲染 HTML 的核心代码
const cleanHtml = DOMPurify.sanitize(dirtyHtml)
👉 完整规范：《XSS 防护规范》
🗺️ 六、新手 & 项目进阶路径
按阶段规划学习与使用路线，效率翻倍
新手入门 4 周计划
- 第 1 周：核心开发规范（Vue 3 + TS + 样式）
- 第 2 周：工程化规范（代码质量 + Git + 错误处理）
- 第 3 周：安全规范（安全总览 + XSS + 认证）
- 第 4 周：进阶规范（高级 TS + Composables）
项目开发全流程路径
- 初始化阶段：项目设置 → 分支管理 → 依赖安装
- 开发阶段：组件规范 → API 设计 → 错误处理
- 审查阶段：代码质量工具 → 安全规范检查
- 上线阶段：性能诊断 → 性能优化 → 安全复查
💡 七、实用查询工具
命令行快速搜索（推荐）
# 搜索包含「Props」的所有规范
grep -r "Props" rules/*.md
# 快速打开 Vue 3 组件规范
code rules/vue3-component-standards.md
VS Code 全局搜索
- 按
Ctrl + Shift + F打开全局搜索 - 设置搜索范围为
rules/目录 - 输入关键词（如「XSS」）即可定位
AI 辅助查询
直接向团队 AI 提问，秒获规范答案：
- “Vue 3 组件的 Props 怎么定义才规范？”
- “防止 XSS 攻击有哪些实操方法？”
- “首屏加载慢，该看哪份性能规范？”
📝 反馈与优化
这份索引会持续迭代，如果你遇到这些情况，欢迎随时反馈：
- 索引信息有误或链接失效
- 常用场景或关键词缺失
- 需要新增查询维度
反馈方式：任务反馈环节直接提 / 告知团队 AI / 提交 PR 更新本文件
