鲁班前端开发规范

解决了什么问题

在 Vue 2.7 项目中，前端规范常常散落在口口相传或零散文档里。新人接手时，不知道该用 Composition API 还是 Options API，不确定该用 Ant Design Vue 还是手写组件。

核心能力与关键步骤

Luban Frontend 技能把 wisedata 项目的前端约定固化下来，让代码风格、组件选型、目录结构、API 封装和提交信息都有统一标准。

它定义了完整的技术栈与代码风格。前端基于 Vue 2.7 和 TypeScript ~4.9，统一使用 Composition API。代码格式遵循项目的 .eslintrc.js 和 .prettierrc，关键规则是 2 空格缩进、单引号、必须加分号、不加尾逗号。

它规范了命名与目录结构。Vue 组件文件用 PascalCase，TS/JS 和样式文件用 kebab-case。组件放在 src/components/，页面放在 src/views/，API 放在 src/api/，路由放在 src/router/modules/。

它约束了组件开发与页面流程。优先使用 Ant Design Vue 组件。新增页面时先建 views 文件，再拆分子组件，然后添加路由和 API。通常不需要新增 Vuex store。

它统一了表单、样式与图标规范。输入框必须设 placeholder，必填项必须有校验。样式统一使用 scoped，图标统一使用 SVG。

它还定义了 Git 提交格式，如 feat(scope): content，并禁止提交 console.log。

适用边界

这套规范绑定 Luban 项目的结构，未必适合其他 Vue 项目。它强制 Vue 2.7 的 setup() 写法，不兼容 <script setup>。