上传与发布

这一页说明把本地组件发布到平台的完整流程。第一次发布必须走这里；之后的版本迭代见更新与版本。

上传前检查

• [ ] 组件是一个独立文件夹，包含入口文件（见组件规范）。
• [ ] 用到的依赖已经在当前项目的 node_modules 中。
• [ ] 单文件 ≤ 3 MB、总大小 ≤ 10 MB、文件数 ≤ 30。
• [ ] 组件名符合 PascalCase 或 kebab-case，且没有重名。
• [ ] 已准备 README.md，属性与事件写清楚了。

五步发布

1. 进入上传页

启动本地服务后，左侧菜单点击「上传组件」。

2. 选择组件目录

左侧文件树显示配置文件中 dir 指定的目录。导航到组件文件夹并选中，点击「选择」。

3. 配置预览

页面上方是实时预览，下方是配置区：

配置项	说明
小窗预览	列表卡片里展示的文件，约定 demo/index.vue
全屏预览	详情页展示的文件，约定 demo/full.vue
组件依赖	从源码自动扫描，发布前核对是否有缺失
备注说明	一句话描述组件用途
附加信息	更详细的说明，支持搜索关键词

Vue / React 选 .vue / .jsx / .tsx 文件；Web Component 选 .html 文件。

4. 生成配置

点击「生成配置」，平台会写入 comp.json：

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

首次发布成功后，服务端会回写 __id__。不要手动修改它，它是后续更新时识别组件的依据。

5. 发布

确认预览与依赖无误后，点击「发布」。成功后组件会出现在「我的组件」，并按推荐规则进入组件市场。

框架是怎么识别的

平台按以下顺序逐条匹配，命中即止：

1. 存在 index.vue → Vue。
2. 存在 index.jsx / index.tsx → React。
3. 任一源码出现 customElements.define( 或 extends HTMLElement → Web Component。
4. 存在 index.js 且没有注册自定义元素 → React。
5. 都不命中 → 不给默认值，需要在上传页手动选择。

上传页「附加信息」里的「组件框架」可以覆盖识别结果，以界面选择为准。

一个组件不要同时依赖 vue 和 react

否则无法判定框架，检查与渲染都会失败。

重复组件

平台会做相似度检测。被判定为重复时：

• 不会进入「推荐」「热门」「最新」列表。
• 只在「我的组件」中可见。
• 会出现在相似组件的推荐里。
• 更新后同样不享受推荐权重。

上传前先搜索是否已有同类组件，可以省掉一轮返工。

首次发布与更新的区别

	首次发布	后续更新
入口	上传页	更新页或 comphub upload
是否创建组件	是，并写入 __id__	否，只新增版本
是否可选预览/描述	是	更新页可以；CLI 不行
版本号	初始版本	改代码必须升版本

发布失败排查

现象	原因	处理
提示缺少依赖	依赖没装在当前项目	在项目根目录 npm install <pkg>
Component has no default export	React 入口只有具名导出	改成 export default
Web Component 预览报找不到 module script	HTML 里没有 <script type="module">，或写在了 <head>	放进 <body>
预览空白但终端无报错	资源路径用了别名，或依赖版本跨大版本	改相对路径、核对依赖
提示文件超限	单文件 > 3 MB / 总量 > 10 MB / 数量 > 30	压缩资源或拆分组件

下一步

• 继续迭代版本：更新与版本
• 用命令行发布：使用 CLI
• 在浏览器里从零开发并发布：使用 Studio