找到与预览
这一页说明如何在组件市场里找到合适的组件，并在下载前确认它真的能用。
进入组件市场
启动本地服务后，在左侧菜单点击「组件市场」。列表里的每一张卡片对应一个已发布的组件。
顶部提供四种筛选：
| 筛选 | 含义 | 什么时候用 |
|---|---|---|
| 推荐 | 综合使用量与评分的推荐排序 | 没有明确目标，先逛逛 |
| 最新 | 按发布时间倒序 | 想看团队最近产出的组件 |
| 热门 | 按下载量排序 | 想找经过较多项目验证的组件 |
| 全部 | 不做依赖匹配过滤 | 明确知道组件存在，但在前三个列表里找不到 |
为什么有些组件只出现在「全部」
前三类列表会过滤掉与本地环境依赖不匹配的组件。组件没出现时，先切到「全部」确认它是否存在，再按依赖匹配处理版本问题。
卡片上的信息
- 名称与作者：组件名在同一空间内唯一，作者是发布者。
- 描述：发布时填写的备注，用来快速判断用途。
- 依赖标签：组件源码里实际引用到的第三方包。
- 统计：下载量、收藏等使用情况。
打开预览页
点击卡片上的「预览」，会在新标签页打开详情页。详情页包含五个区域：
- 预览区：组件真实运行效果，支持小窗与全屏切换。
- 文档区：组件
README.md的渲染结果，包含属性、事件与使用示例。 - 版本选择：切换查看历史版本，下载前可以对比行为差异。
- 依赖信息：组件声明的依赖、本地匹配状态，以及缺失项。
- 外观控制：切换背景色，检查组件在深浅底色下的表现。
预览时该确认什么
- 组件在你当前的框架版本下能正常渲染（Vue 2 / Vue 3 / React）。
- 交互行为符合预期，而不只是静态截图好看。
- 依赖状态没有红色告警；黄色表示版本有差异，可继续观察。
- README 里的属性表与实际行为一致。
组件不显示怎么办
按顺序排查：
- 把筛选切到「全部」，确认组件确实存在。
- 打开组件详情，查看依赖状态与缺失项。
- 在本地项目安装缺失依赖，刷新页面。
- 版本差异不影响功能时，在「设置 → 预览规则」放宽匹配规则。
完整规则与示例见依赖匹配。