快速開始

這一頁帶你從零啟動 comp-hub，並發布第一個元件。整個過程只需要終端機和瀏覽器。

前置條件

項目	要求
Node.js	16.0.0 及以上
npm	8.0.0 及以上
瀏覽器	Chrome、Edge、Firefox 等現代瀏覽器

啟動本地服務

在專案根目錄執行（元件所在的專案）：

npx comp-hub

npx 會按需拉取 CLI，適合第一次體驗。長期使用建議改成下面兩種方式之一：

# 全域安裝，之後直接用 comphub 命令
npm install comp-hub@latest -g

# 或作為專案開發依賴
npm install comp-hub@latest -D
npx comphub

comphub、ch、comp-hub 是同一個程式的三個名稱，用哪個都可以。

你會看到什麼

啟動成功後，終端機會列印版本、專案路徑、專案 hash、連接埠和存取位址：

✓ comp-hub v0.44.11

  Version  0.44.11
  Project  D:\project\my-app
  Hash     94525912
  Port     5478

  URL      http://localhost:5478/94525912/main/

在瀏覽器開啟 URL 就進入平台。常用參數：

comphub -p 8080     # 指定連接埠
comphub -d ./src    # 指定元件根目錄
comphub -l debug    # 調整日誌層級

連接埠為什麼沒變

-p 只在 master 程序尚未執行時生效。已有服務在跑時會沿用原連接埠，需要換連接埠先執行 comphub kill。

發布第一個元件

元件就是一個資料夾，資料夾名稱即元件名稱。先按下面的最小結構準備：

MyButton/
├── index.vue      # 入口檔案（Vue；React 用 index.jsx / index.tsx）
└── README.md      # 選填，但強烈建議

然後在平台裡完成三步：

1. 上傳元件：左側選單進入「上傳元件」，在檔案樹裡選取 MyButton 資料夾，點擊「選擇」。
2. 設定預覽：選擇小窗預覽與全螢幕預覽檔案，核對自動掃描出的依賴，填寫備註。
3. 發布：點擊「產生設定」建立 comp.json，確認無誤後點擊「發布」。

發布成功後，元件會出現在「我的元件」與元件市場中。完整規則見上傳與發布，元件寫法見元件規範。

下一步

• 想先看看平台上有什麼：找到與預覽
• 想把別人的元件用到專案裡：下載與使用
• 想從零寫一個元件：使用 Studio
• 想用命令列管理服務與發布：使用 CLI