下載與使用

這一頁說明把元件取到本地專案後，如何正確引用和執行。

下載元件的兩個入口

從元件市場

1. 在列表裡找到目標元件。
2. 點擊卡片上的「下載」。
3. 在檔案選擇器裡定位到專案的元件目錄（例如 src/components）。
4. 點擊「選擇資料夾」確認。

從預覽頁

1. 開啟元件詳情頁。
2. 點擊右下角的「下載」。
3. 選擇儲存位置。

下載完成後，元件會以資料夾形式出現在你選擇的目錄裡。

下載後的目錄結構

MyComponent/
├── index.vue          # 入口檔案（框架不同，副檔名不同）
├── README.md          # 使用說明
├── comp.json          # 平台產生的元件中繼資訊
├── demo/              # 預覽範例（如果作者提供）
│   ├── index.vue
│   └── full.vue
└── assets/            # 元件自帶資源（如果有）

comp.json 只包含 __id__、name、version 三個欄位，用於識別元件身分。不要把依賴寫進去，依賴由原始碼 import 決定。

在專案裡引用

Vue 3

<template>
  <MyComponent title="範例" :data="rows" />
</template>

<script setup>
import MyComponent from "@/components/MyComponent/index.vue";
</script>

Vue 2

import MyComponent from "@/components/MyComponent/index.vue";

export default {
  components: { MyComponent }
};

React

import MyComponent from "@/components/MyComponent/index.jsx";

export default function Demo() {
  return <MyComponent title="範例" />;
}

元件入口必須有 default export。只有具名匯出時，預覽和引用都會報錯。

安裝依賴

元件用到的第三方套件不會隨元件打包，需要在你的專案裡安裝：

npm install echarts

版本不必與作者完全一致，平台預覽時會做依賴匹配；下載到本地後，執行使用的是你專案的版本。元件依賴清單可以在 README 或預覽頁的依賴區查看。

常見問題

元件渲染不出來

按順序檢查：框架是否匹配（Vue 2 / Vue 3 / React）、依賴是否安裝、主控台第一條報錯是什麼。多數情況是缺依賴或版本跨了大版本。

樣式和專案衝突

元件應使用 scoped 樣式。若確實需要覆蓋內部樣式，使用 :deep()，不要寫全域選擇器。

下載後找不到 comp.json

說明下載的是舊版本產物或手動複製時漏了檔案。重新下載即可；comp.json 缺失會影響後續更新時識別元件身分。

想改元件再發布

請看更新與版本。

下一步

• 想自己寫一個元件：元件規範
• 想把改好的版本發回平台：上傳與發布