CoreUI 是一套现代化、可定制的 UI 组件体系。本栏目带你从按钮、表单、导航到数据表格，逐组件吃透原理、样式与交互，并给出可复用的代码与最佳实践，让前端开发不再重复造轮子。
<!-- 按钮组件示例 --> <template> <button class="cu-btn cu-btn--primary" @click="handleClick"> {{ label }} </button> </template> // 5 种状态：primary / ghost / dashed / text / link const props = defineProps({ type: 'primary', size: 'md', loading: false })
每个组件都配套原理讲解、代码实现与真实项目应用案例，学完即可直接用在你的项目里。
业务场景与组件的对应关系，是组件库使用者的第一张速查表。
| 业务场景 | 首选组件 | 备选方案 | 注意 |
|---|---|---|---|
| 让用户执行关键动作 | 按钮（主/次/危险） | 链接跳转 | 一页一个主按钮 |
| 收集用户信息 | 表单 + 校验 | 分步表单 | 字段能少则少 |
| 用户需要找位置 | 导航 + 面包屑 | 搜索框 | 层级 ≤ 3 层 |
| 展示信息分组 | 卡片/栅格 | 表格 | 信息量少用卡片 |
| 打断确认重要操作 | 模态框/对话框 | 气泡确认 | 能轻则轻，慎用弹窗 |
| 海量数据浏览 | 数据表格 | 虚拟列表 | 万级数据必须分页/虚拟滚动 |
下面是一个简化版组件效果预览，真实项目中你可以按需组合与定制主题。
卡片内容，展示信息层级与排版。
组件化把"样式 + 逻辑 + 状态"封装成可复用单元，带来的直接收益是：代码量下降、一致性提升、维护成本降低。一个按钮组件写一次，全站几十处引用都随它升级。
