快速开始

本章节将引导您完成 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 的简写别名。banner 之后 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. 默认配置

下一步

服务启动后，您可以：

• 上传组件 — 将您的组件发布到平台
• 预览下载 — 查看和使用其他组件