核心是让规范自然落地，重点抓命名、结构、通信、复用四方面：组件命名语义化且统一PascalCase，目录名小写加中划线；单文件组件严格按template→script→style顺序；父子通信遵循props与$emit契约；复用逻辑收口于composables/并经Storybook等三重验证。
核心不是堆规则，而是让规范能自然落地、被真正用起来。重点抓命名、结构、通信、复用这四块，其他细节靠工具兜底。
组件命名必须语义化且可预测
所有组件文件名和 name 选项统一用 PascalCase（如 UserCard.vue、OrderSummary.vue），禁止缩写或拼音。页面级组件以 Page 结尾（DashboardPage.vue），基础组件加前缀（BaseButton.vue、AppIcon.vue）。目录名全小写+中划线（user-profile），避免大小写混用导致跨平台问题。
单文件组件结构强制分层
每个 .vue 文件严格按 <template> → <script> → <style> 顺序组织。script 中 data 必须是函数，props 必须声明类型与默认值（哪怕只是 default: () => ({})），methods 按生命周期钩子→事件处理→业务逻辑分组排列。style 标签一律带 scoped，类名用 BEM 风格（user-card__header），禁用标签选择器。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
父子通信要“有契约、可追溯”
父传子只通过 props，且每个 prop 明确标注 type、required、default；子传父只用 $emit，事件名用 kebab-case（update-user），避免直接修改 prop 或使用 $parent。跨层级状态交由 Pinia 管理，store 模块按功能划分（userStore.js、cartStore.js），不设全局共享 state。
立即学习“前端免费学习笔记（深入）”；
复用逻辑必须收口、可验证
抽离的组合式函数（useApi、usePagination）统一放在 composables/ 目录，导出函数名带 use 前缀，内部不依赖具体组件实例。公共组件放入 components/base/（基础控件）或 components/ui/（业务组件），每个组件目录下必须含 README.md，说明用途、props、events、slots 及最小使用示例。新组件合并前需通过 Storybook 预览页 + ESLint + 自动化快照测试三道关卡。
