Vue组件高可复用需聚焦架构设计：坚持单一职责与明确接口、分层组织与按需导出、样式隔离与主题可插拔、文档即代码与可视化验证。
要让 Vue.js 组件真正“高可复用”，不能只靠写得漂亮，关键在于设计架构是否支撑长期演进、多场景适配和团队协同。核心不是堆功能，而是做减法、立边界、留扩展点。
单一职责 + 明确接口
每个组件只解决一个具体问题，比如 Button 不处理表单提交逻辑，只响应点击并发出语义化事件；Input 不校验业务规则，只暴露值变更和失焦事件。接口设计要克制：
- props 限定为外观与行为控制项（如
size、disabled、variant），避免传入业务数据或回调函数 - 事件命名使用动词前缀（如
click-button、input-change），不模糊、不缩写 - 插槽命名清晰且有默认 fallback，例如
default放主体内容，prefix和suffix专用于输入框前后装饰
分层组织 + 按需导出
组件库目录结构应反映抽象层级，而非功能分类：
-
src/components/basic/：原子组件（Button、Icon、Text）——无业务耦合，纯样式+交互 -
src/components/composite/：组合组件（SearchBar、Pagination）——由 basic 组装，含简单逻辑 -
src/components/business/：业务组件（OrderCard、UserProfile）——项目专属，不进公共库
构建时采用多入口配置（如 Vite 的 build.lib.entry），让使用者能直接导入 import { Button } from 'my-ui/Button'，天然支持 tree-shaking。
立即学习“前端免费学习笔记（深入）”；
样式隔离 + 主题可插拔
样式必须作用域隔离，但不能锁死设计系统：
- 所有组件使用
<style scoped>或 CSS Modules，杜绝全局污染 - 颜色、间距、圆角等设计 token 抽离为 CSS 自定义属性（
--btn-bg、--space-md），通过根节点 class 切换主题（如theme-dark） - 不内联主题色，也不硬编码暗色模式逻辑，交由应用层统一控制
文档即代码 + 可视化验证
组件库的文档不是附加品，而是开发流程的一部分：
- 每个组件配套 Storybook 文件（
Button.stories.vue），覆盖所有 props 组合、状态（hover/disabled/loading）、插槽用法 - Story 中使用真实业务场景片段（如带图标按钮、禁用态表单按钮），而非纯演示
- CI 流程中自动运行 Storybook 快照测试 + a11y 检查，确保无障碍属性（
aria-label、role）不被遗漏
