快速開始

本章節將引導您完成 comp-hub 的安裝和啟動，整個過程不超過 5 分鐘。

最快方式 — 無需安裝

在專案目錄執行下列指令即可直接啟動，npx 會依需求拉取 CLI：

npx comp-hub

想要長期安裝使用，請看方式一：全域安裝（推薦）。

環境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

支援框架

框架	版本	狀態
Vue	2.x	✅ 支援
Vue	3.x	✅ 支援
React	18.x	✅ 支援
React	17.x	✅ 支援

安裝

方式一：全域安裝（推薦）

全域安裝 comp-hub CLI，安裝後可直接使用 comphub 指令：

npm install comp-hub@latest -g

方式二：本機開發依賴安裝

僅在目前專案中安裝，適合團隊協作場景：

npm install comp-hub@latest -D

方式三：免安裝使用（npx）

不想安裝也能直接體驗，npx 會依需求拉取 CLI：

npx comp-hub

comp-hub 是 CLI 的二進位別名之一（另有 comphub 和 ch）。因為別名與套件名稱一致，npx comp-hub 可以直接解析並啟動 CLI。

啟動服務

全域安裝後啟動

在專案目錄下執行：

comphub

本機安裝後啟動

如果使用的是 -D 本機安裝，需要透過 npx 執行：

npx comphub

免安裝啟動

完全略過安裝，直接透過 npx 執行：

npx comp-hub

啟動成功後，終端機會顯示類似以下輸出：

✓ comp-hub v0.44.11

   ██████╗  ██████╗  ███╗   ███╗ ██████╗       ██╗  ██╗ ██╗   ██╗ ██████╗
  ██╔════╝ ██╔═══██╗ ████╗ ████║ ██╔══██╗      ██║  ██║ ██║   ██║ ██╔══██╗
  ██║      ██║   ██║ ██╔████╔██║ ██████╔╝      ███████║ ██║   ██║ ██████╔╝
  ██║      ██║   ██║ ██║╚██╔╝██║ ██╔═══╝       ██╔══██║ ██║   ██║ ██╔══██╗
  ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║ ██║           ██║  ██║ ╚██████╔╝ ██████╔╝
   ╚═════╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝           ╚═╝  ╚═╝  ╚═════╝  ╚═════╝

  Version  0.44.11
  Project  C:\Users\14060\Desktop\程式\comp-hub-monorepo\housing\vue2
  Hash     9de6965c
  Port     5478

  URL      http://localhost:5478/9de6965c/main/

  ─────────────────────────────────────────────

  comphub status                View all projects
  comphub stop    9de6965c      Stop current project
  comphub stop    --all         Stop all projects
  comphub kill                  Shutdown master

使用瀏覽器存取顯示的 URL，即可進入 comp-hub 平台。

ch 是 comphub 的簡寫別名。橫幅之後 CLI 會即時輸出本專案的 MidwayJS 日誌，按 Ctrl+C 結束。詳見 CLI 參考。

CLI 指令列參數

您也可以透過指令列參數來設定啟動選項：

comphub [options]

參數說明：

參數	簡寫	類型	預設值	說明
--port	-p	number	5478	啟動埠
--dir	-d	path	"./"	資源目錄相對路徑
--log-level	-l	string	"error"	日誌級別：debug, info, warn, error

| --version | -v | - | - | 顯示版本號 | | --help | -h | - | - | 顯示說明資訊 |

使用範例：

# 指定埠啟動
comphub -p 8080

# 指定資源目錄
comphub -d ./src

# 調整日誌級別
comphub -l debug

# 查看版本號
comphub -v

# 查看說明資訊
comphub -h

設定說明

如需指定元件目錄或自訂代理規則，可在專案根目錄建立 .comphub.json 或 .comphub.js 檔案：

設定檔格式

JSON 格式（.comphub.json）：

{
  "dir": "./src",
  "allowDebug": false
}

JS 格式（.comphub.js）：

NOTE

請根據專案的模組系統選擇對應的匯出語法。

• CommonJS（package.json 無 "type": "module" 或 "type": "commonjs" 時）：

module.exports = {
  dir: './src',
  allowDebug: false
}

• ESM（package.json 中 "type": "module" 時）：

export default {
  dir: './src',
  allowDebug: false
}

設定項說明

設定項	類型	預設值	說明
dir	string	"./"	元件程式碼根目錄的相對路徑，上傳/下載時只能操作該目錄及其子目錄
allowDebug	boolean	false	是否允許偵錯模式
proxy	object	-	自訂代理規則，格式同 http-proxy-middleware 設定項

設定檔載入優先級

1. 優先嘗試載入 .comphub.json
2. 如果 JSON 檔案不存在，嘗試載入 .comphub.js
3. 如果都不存在，使用預設設定

設定優先級

設定值的優先級從高到低：

1. 指令列參數（如 -d ./src）
2. 設定檔（.comphub.json 或 .comphub.js）
3. 預設設定

下一步

服務啟動後，您可以：

• 上傳元件 — 將您的元件發佈到平台
• 預覽下載 — 查看和使用其他元件