Vue单文件组件应通过分层解耦避免臃肿：模板语义化精简、脚本按职责分组并抽离逻辑、样式scoped+BEM约束、文件按功能模块组织。

Vue 单文件组件（SFC）容易随着功能增加变得臃肿，关键不是“写多少”，而是“怎么分层”。核心思路是：模板聚焦视图、逻辑按职责拆解、样式隔离且可复用。下面从四个实际可落地的角度说明。

模板部分：保持语义化与层级精简

避免嵌套过深或堆砌 div，优先使用语义化标签和合理抽象：

• 用 <section></section>、<header></header>、<aside></aside> 替代无意义的 <div> <li>复杂结构提取为子组件，比如表单区域、列表项、操作栏单独成 Vue 文件</li> <li>条件渲染逻辑尽量不写在模板里，如 <code>v-if="user.role === 'admin' && !loading && data.length" 应封装为计算属性

脚本部分：按职责分组 + 分离业务逻辑

不要把所有代码塞进 setup() 或 export default 里，尤其当组件超过 300 行时：


Element Plus UI Vue3
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
下载
• 组合式 API 中，将状态、计算、方法、副作用等归类声明，保持视觉区块清晰
• 把数据获取、校验、格式化等通用逻辑抽到 composables/ 目录下，例如 useUserFetch()、useFormRules()
• 复杂业务流程（如提交订单的多步校验）移到 services/ 或 utils/，组件只负责调用和响应

样式部分：作用域控制 + BEM 约束

样式膨胀常源于全局污染和选择器滥用：

立即学习“前端免费学习笔记（深入）”；

• 始终加 scoped，避免影响其他组件
• 用 BEM 命名（如 user-card__header、user-card--loading），杜绝 div p span 这类深层嵌套选择器
• 公共样式（颜色、间距、圆角）统一抽到 assets/styles/variables.scss 或 CSS 自定义属性中

文件组织：按功能模块切分，而非“全扔 components”

一个 components/ 文件夹里塞 200 个 .vue 文件，比代码本身更难维护：

• 页面专属组件放 pages/[PageName]/components/，如 pages/UserProfile/components/UserAvatar.vue
• 跨页面复用的基础组件统一收口到 components/base/（Button、Input、Icon）和 components/common/（Modal、Table、Pagination）
• 业务组件按领域划分，如 components/user/、components/order/，每个目录内再按 index.vue + sub-components/ 组织