Vue 3 SFC 必须严格按 template → script setup → style scoped 顺序组织，script setup 内分导入、类型定义、响应式状态、生命周期、方法、暴露内容六大区块，命名与作用域遵循 PascalCase 文件名、类型化 Props/Emits 等刚性规则。
合理组织 Vue 3 单文件组件（SFC）的代码结构，核心是让团队成员打开任意一个 .vue 文件时，能立刻知道“哪里写模板”“状态在哪声明”“逻辑怎么分层”“样式是否隔离”。这不是风格偏好，而是降低协作成本、减少合并冲突、提升可维护性的硬性工程实践。
三块物理顺序必须固定
所有 .vue 文件严格按以下顺序书写，不跳过、不调换、不合并：
-
<template>：只放纯模板结构，不写逻辑判断、不加注释块（如“用户表单区”这类说明应移至script对应位置） -
<script setup>：强制使用组合式 API 语法糖；禁用 Options API；不写name选项（组件名由文件名隐式决定） -
<style scoped>：必须带scoped；主题变量优先通过:root或 CSS-in-JS 管理，避免直接写#3498db这类硬编码值
script setup 内部按功能区块纵向分层
每个区块用统一注释标识，区块之间空一行，便于快速扫描定位：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
// —— 导入 ——：Vue API → 第三方库 → 项目内 utils/api/enums → store → 子组件，按依赖层级从上到下 -
// —— 类型定义与常量 ——：interface、type、const集中在此，不穿插在逻辑中 -
// —— 响应式状态 ——：ref、reactive、computed统一声明，命名需语义化（如isLoading、formErrors） -
// —— 生命周期与副作用 ——：onMounted、watch、onBeforeUnmount等集中管理，禁止散落在各处 -
// —— 方法与事件处理 ——：函数以动词开头（handleSubmit、fetchData），布尔类方法用is/has/can前缀（isValid✅，valid❌） -
// —— 暴露给 template 的内容 ——：仅显式return模板真正需要的变量和函数，不暴露工具方法或中间状态
命名与作用域的刚性规则
这些不是建议，应在 ESLint / Prettier / CI 中配置为自动拦截的红线：
立即学习“前端免费学习笔记（深入）”；
- 文件名用 PascalCase：
UserProfileCard.vue✅，user-profile-card.vue❌ - Props 必须类型化：
defineProps<{ isVisible: boolean; userName: string }>()；布尔 props 强制前缀（isVisible✅，visible❌） - Emits 必须类型化：
defineEmits<{ 'item-delete': [id: number] }>()；事件名用 kebab-case（item-delete✅，itemDelete❌） - 样式必须
scoped；需穿透时明确写:deep(.el-input)，禁用已废弃的/deep/或::v-deep - 删除所有冗余：未使用的 import、未引用的 ref、空的生命周期钩子、被注释掉的代码块
不复杂但容易忽略——结构一致比单个组件多炫几个技巧更重要。团队里每个人写的组件，打开后都像同一人写的，这才是规范落地的真实价值。
