找到與預覽
這一頁說明如何在元件市場裡找到合適的元件，並在下載前確認它真的能用。
進入元件市場
啟動本地服務後，在左側選單點擊「元件市場」。列表裡的每一張卡片對應一個已發布的元件。
頂部提供四種篩選：
| 篩選 | 含義 | 什麼時候用 |
|---|---|---|
| 推薦 | 綜合使用量與評分的推薦排序 | 沒有明確目標，先逛逛 |
| 最新 | 按發布時間倒序 | 想看團隊最近產出的元件 |
| 熱門 | 按下載量排序 | 想找經過較多專案驗證的元件 |
| 全部 | 不做依賴匹配過濾 | 明確知道元件存在，但在前三個列表裡找不到 |
為什麼有些元件只出現在「全部」
前三類列表會過濾掉與本地環境依賴不匹配的元件。元件沒出現時，先切到「全部」確認它是否存在，再按依賴匹配處理版本問題。
卡片上的資訊
- 名稱與作者：元件名稱在同一空間內唯一，作者是發布者。
- 描述：發布時填寫的備註，用來快速判斷用途。
- 依賴標籤：元件原始碼裡實際引用到的第三方套件。
- 統計：下載量、收藏等使用情況。
開啟預覽頁
點擊卡片上的「預覽」，會在新分頁開啟詳情頁。詳情頁包含五個區域：
- 預覽區：元件真實執行效果，支援小窗與全螢幕切換。
- 文件區：元件
README.md的渲染結果，包含屬性、事件與使用範例。 - 版本選擇：切換查看歷史版本，下載前可以對比行為差異。
- 依賴資訊：元件宣告的依賴、本地匹配狀態，以及缺失項。
- 外觀控制：切換背景色，檢查元件在深淺底色下的表現。
預覽時該確認什麼
- 元件在你目前的框架版本下能正常渲染（Vue 2 / Vue 3 / React）。
- 互動行為符合預期，而不只是靜態截圖好看。
- 依賴狀態沒有紅色告警；黃色表示版本有差異，可繼續觀察。
- README 裡的屬性表與實際行為一致。
元件不顯示怎麼辦
按順序排查：
- 把篩選切到「全部」，確認元件確實存在。
- 開啟元件詳情，查看依賴狀態與缺失項。
- 在本地專案安裝缺失依賴，重新整理頁面。
- 版本差異不影響功能時，在「設定 → 預覽規則」放寬匹配規則。
完整規則與範例見依賴匹配。