VUE前端项目规范.md---大模型辅助开发使用约束
<h1 id="前端代码开发与输出规范">前端代码开发与输出规范</h1><h2 id="通用要求">通用要求</h2>
<ul>
<li><strong>语言</strong>：思考过程与输出内容一律使用中文。</li>
<li><strong>上下文引用</strong>：每次对话必须明确引用项目中的 <code>README.md</code> 相关内容，确保开发行为与项目目标一致。</li>
<li><strong>项目架构</strong>：基于Vue.js + ElementUI + Vue Router + Vuex + Axios的前端架构。</li>
<li><strong>文档位置</strong>: 项目文档统一存放在 <code>/docs</code> 目录下，并使用 <code>.md</code> 格式编写。</li>
<li><strong>Git提交规范</strong>: 所有代码提交必须遵循 <code>GIT_COMMIT.md</code> 中定义的提交规范，AI助手在生成提交信息时必须参考该文档。</li>
</ul>
<h2 id="代码风格">代码风格</h2>
<ul>
<li>保持统一的代码风格（如缩进使用2个空格、分号使用、换行等）。</li>
<li>遵循Vue.js官方风格指南和ESLint规范。</li>
<li>优先保障代码的可读性，避免过度压缩或炫技式写法。</li>
</ul>
<h2 id="命名与注释">命名与注释</h2>
<h3 id="命名规范">命名规范</h3>
<ul>
<li><strong>变量名、函数名</strong>：采用<strong>小驼峰命名法</strong>（camelCase）</li>
<li><strong>组件名</strong>：采用<strong>大驼峰命名法</strong>（PascalCase），如 <code>UserList.vue</code></li>
<li><strong>文件名</strong>：Vue组件使用大驼峰，其他文件使用小驼峰或短横线分隔</li>
<li><strong>常量</strong>：使用全大写加下划线，如 <code>API_BASE_URL</code></li>
<li><strong>CSS类名</strong>：使用短横线分隔，如 <code>user-list-item</code></li>
</ul>
<h3 id="注释规范">注释规范</h3>
<ul>
<li>所有函数、组件、关键逻辑块必须附带<strong>清晰、准确、简洁的中文注释</strong></li>
<li>注释应说明"为什么"而不仅是"做什么"</li>
<li><strong>@author 格式</strong>: <code>username / useremail</code>（从Git配置获取）</li>
<li><strong>@since 格式</strong>: <code>yyyy-MM-dd HH:mm:ss</code>（代码生成时的时间戳）</li>
</ul>
<h3 id="vue组件注释示例">Vue组件注释示例</h3>
<template>
<el-form :model="searchForm" inline>
<el-form-item label="用户名">
<el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
</el-form>
</template>
<h2 id="编码规范">编码规范</h2>
<h3 id="vue组件规范">Vue组件规范</h3>
<ul>
<li><strong>单个函数长度不超过50行</strong>，超出时应考虑拆分或重构</li>
<li><strong>组件文件不超过300行</strong>，超出时应拆分为多个子组件</li>
<li><strong>禁止使用全局变量</strong>，优先使用Vuex状态管理或props/emit传递数据</li>
<li><strong>模块导入</strong>：使用ES6 import/export语法，避免require</li>
<li><strong>代码格式</strong>：使用2个空格缩进，行尾加分号</li>
</ul>
<h3 id="javascript规范">JavaScript规范</h3>
<ul>
<li>使用ES6+语法（箭头函数、解构赋值、模板字符串等）</li>
<li>优先使用const，其次let，避免使用var</li>
<li>函数参数不超过3个，超出时使用对象参数</li>
<li>避免深层嵌套，最多3层</li>
</ul>
<h3 id="vue特定规范">Vue特定规范</h3>
<ul>
<li>组件props必须定义类型和默认值</li>
<li>使用computed处理复杂逻辑，避免在template中写复杂表达式</li>
<li>合理使用生命周期钩子，避免在created中执行DOM操作</li>
<li>组件销毁时清理定时器和事件监听器</li>
</ul>
<h2 id="样式规范">样式规范</h2>
<h3 id="cssscss规范">CSS/SCSS规范</h3>
<ul>
<li>使用SCSS预处理器，支持变量和嵌套</li>
<li>类名使用短横线分隔命名法（kebab-case）</li>
<li>避免使用!important，通过提高选择器权重解决</li>
<li>合理使用CSS变量定义主题色彩</li>
</ul>
<h3 id="elementui使用规范">ElementUI使用规范</h3>
<ul>
<li>优先使用ElementUI组件，避免重复造轮子</li>
<li>自定义样式时使用scoped避免全局污染</li>
<li>主题定制通过variables.scss文件统一管理</li>
</ul>
<h3 id="响应式设计">响应式设计</h3>
<ul>
<li>使用ElementUI的栅格系统实现响应式布局</li>
<li>移动端适配使用媒体查询</li>
<li>图片使用相对单位，支持高分辨率屏幕</li>
</ul>
<h2 id="测试要求">测试要求</h2>
<h3 id="单元测试">单元测试</h3>
<ul>
<li>为核心业务逻辑和工具函数编写<strong>单元测试</strong></li>
<li>使用Jest + Vue Test Utils进行组件测试</li>
<li>测试覆盖率不低于<strong>70%</strong>（考虑前端项目特点）</li>
<li>测试用例需覆盖正常路径、边界条件和异常场景</li>
</ul>
<h3 id="e2e测试">E2E测试</h3>
<ul>
<li>关键业务流程编写端到端测试</li>
<li>使用Cypress或Playwright进行自动化测试</li>
<li>覆盖主要用户操作路径</li>
</ul>
<h3 id="手动测试">手动测试</h3>
<ul>
<li>新功能开发完成后进行浏览器兼容性测试</li>
<li>测试不同屏幕尺寸的响应式效果</li>
<li>验证无障碍访问性（a11y）</li>
</ul>
<h2 id="代码优化">代码优化</h2>
<ul>
<li>优化需<strong>基于性能瓶颈或可维护性问题</strong>，避免无意义的"提前优化"。</li>
<li>任何优化后必须通过<strong>完整测试验证</strong>，确保功能正确性。</li>
<li>在性能与可读性之间优先保障可读性，除非性能是明确瓶颈。</li>
</ul>
<h2 id="代码重构">代码重构</h2>
<ul>
<li>重构前需明确目标（如提升可读性、消除重复、改善结构等）。</li>
<li>重构后必须通过<strong>全部现有测试</strong>，并补充必要新测试。</li>
<li>重构不得降低代码可读性或引入隐式复杂度。</li>
</ul>
<h2 id="文档要求">文档要求</h2>
<ul>
<li>所有模块、接口、关键算法必须配套<strong>详细的技术文档</strong>。</li>
<li>文档应包含：功能说明、使用示例、输入/输出定义、依赖关系等。</li>
<li>文档需与代码同步更新，避免"文档腐化"。</li>
</ul>
<h2 id="开发工具与脚本">开发工具与脚本</h2>
<h3 id="代码生成信息获取脚本">代码生成信息获取脚本</h3>
<p>项目提供了自动获取代码生成信息的脚本，用于生成规范的@author和@since注释。</p>
<p><strong>脚本位置</strong>:</p>
<ul>
<li>Windows: <code>scripts/get-code-info.bat</code></li>
<li>Linux/macOS: <code>scripts/get-code-info.sh</code></li>
</ul>
<p><strong>使用场景</strong>:</p>
<ul>
<li>生成新的Vue组件时</li>
<li>添加新的工具函数时</li>
<li>需要标注作者和时间信息时</li>
</ul>
<h3 id="开发工具配置">开发工具配置</h3>
<h4 id="eslint配置">ESLint配置</h4>
<ul>
<li>使用Vue官方ESLint配置</li>
<li>自定义规则适配项目需求</li>
<li>保存时自动格式化代码</li>
</ul>
<h4 id="prettier配置">Prettier配置</h4>
<ul>
<li>统一代码格式化规则</li>
<li>配置文件：<code>.prettierrc</code></li>
<li>与ESLint集成避免冲突</li>
</ul>
<h4 id="vs-code配置">VS Code配置</h4>
<p>推荐安装插件：</p>
<ul>
<li>Vetur（Vue语法高亮）</li>
<li>ESLint（代码检查）</li>
<li>Prettier（代码格式化）</li>
<li>Auto Rename Tag（标签自动重命名）</li>
</ul>
<h2 id="git提交规范">Git提交规范</h2>
<h3 id="规范文档引用">规范文档引用</h3>
<p>完整的Git提交规范请参考：<strong>GIT_COMMIT.md</strong></p>
<h3 id="ai助手职责">AI助手职责</h3>
<p>当开发人员请求生成Git提交信息时，AI助手必须：</p>
<ol>
<li>
<p><strong>自动分析代码变更</strong></p>
<ul>
<li>执行 <code>git status</code> 查看变更文件</li>
<li>执行 <code>git diff</code> 分析具体变更内容</li>
<li>识别变更类型（新功能、修复、重构等）</li>
</ul>
</li>
<li>
<p><strong>生成规范提交信息</strong></p>
<ul>
<li>格式：<code> </code></li>
<li>使用当前周任务编号（需开发人员提供）</li>
<li>选择正确的type类型</li>
<li>subject不超过50字符</li>
<li>body列出所有关键变更（使用 <code>-</code> 标识）</li>
</ul>
</li>
<li>
<p><strong>质量保证</strong></p>
<ul>
<li>✅ 包含任务编号</li>
<li>✅ 正确的type类型</li>
<li>✅ 简洁的subject</li>
<li>✅ 完整的body</li>
<li>✅ 格式规范</li>
</ul>
</li>
</ol>
<h3 id="提交类型速查">提交类型速查</h3>
<table>
<thead>
<tr>
<th>type</th>
<th>说明</th>
<th>使用场景</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>feat</code></td>
<td>新功能</td>
<td>新增页面、组件、业务功能</td>
</tr>
<tr>
<td><code>fix</code></td>
<td>缺陷修复</td>
<td>修复Bug、样式问题、逻辑错误</td>
</tr>
<tr>
<td><code>refactor</code></td>
<td>代码重构</td>
<td>重构组件、优化代码结构</td>
</tr>
<tr>
<td><code>docs</code></td>
<td>文档变更</td>
<td>修改README、注释、开发文档</td>
</tr>
<tr>
<td><code>style</code></td>
<td>样式调整</td>
<td>CSS样式修改、UI调整</td>
</tr>
<tr>
<td><code>perf</code></td>
<td>性能优化</td>
<td>优化加载速度、减少包体积</td>
</tr>
<tr>
<td><code>test</code></td>
<td>测试代码</td>
<td>新增或修改单元测试、E2E测试</td>
</tr>
<tr>
<td><code>build</code></td>
<td>构建调整</td>
<td>webpack配置、依赖管理、打包优化</td>
</tr>
<tr>
<td><code>chore</code></td>
<td>其他变更</td>
<td>配置文件、开发工具配置</td>
</tr>
</tbody>
</table>
<h3 id="使用示例">使用示例</h3>
feat 新增用户管理页面
- 新增UserList.vue用户列表组件
- 实现用户查询、新增、编辑功能
- 添加用户状态管理和权限控制
- 集成ElementUI表格和分页组件
<h3 id="任务编号管理">任务编号管理</h3>
<ul>
<li>开发人员每周提供一次任务编号</li>
<li>AI助手自动记录到GIT_COMMIT.md文档中</li>
<li>生成提交信息时自动使用当前任务编号</li>
</ul>
<h3 id="触发场景">触发场景</h3>
<p>AI助手应在以下场景主动提供Git提交信息生成服务：</p>
<ul>
<li>开发人员明确请求生成提交信息</li>
<li>完成代码开发任务后</li>
<li>开发人员询问如何提交代码时</li>
</ul>
<h3 id="自动执行git操作">自动执行Git操作</h3>
<p><strong>重要：AI主动询问机制</strong></p>
<ul>
<li>生成提交信息后，AI必须主动询问：“是否需要我直接执行git提交并推送到远程仓库？”</li>
<li>开发人员无需主动说明，AI会自动提示</li>
<li>开发人员确认后，AI自动执行：
<ul>
<li>git add 添加文件</li>
<li>git commit 提交到本地</li>
<li>git push 推送到远程仓库</li>
<li>提供详细的执行结果反馈</li>
</ul>
</li>
</ul><br>来源：程序园用户自行投稿发布，如果侵权，请联系站长删除<br>免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢发布原创作品，程序园因你更精彩 用心讨论，共获提升！
页:
[1]