自定义组件开发手册

Appearance

快速开始 ​

本页介绍 neo-cmp-cli 从安装到发布一个自定义组件的最短路径。完整命令说明、模板表、授权与排错见 CLI 使用说明。

创建一个自定义组件 ​

说明：示例命令使用 npmmirror 镜像，以加快安装速度；也可改用默认 npm 源。

1. 创建自定义组件项目 ​

bash
# 方式一：创建空的自定义组件项目
neo create project

# 方式二：按模板创建（交互选择模板；或使用 neo init -t <类型> -n <名称> 非交互）
neo init

2. 进入项目并安装依赖 ​

bash
cd xxCmpProject
npm install
# 或
yarn install

3. 创建自定义组件 ​

bash
# 在当前项目中创建一个自定义组件
neo create cmp

默认在 src/components/ 下新增自定义组件目录。

4. 预览 ​

bash
# 在线预览（默认）
neo preview
# 等价于
neo preview -m online

# 本地预览
neo preview -m local

# 指定组件名 + 预览模式
neo preview -n xxCmp -m online
neo preview -n xxCmp -m local

neo preview 支持两种预览模式：

  • 在线预览（online，默认）：在 NeoCRM / 页面设计器的在线环境中预览组件，可以访问 Neo 平台运行时、接口与上下文；推荐使用。
  • 本地预览（local）：在本地开发服务器中预览组件（含热更新与接口代理），适合纯前端、不依赖平台运行时的场景。

命令成功执行后，一般会默认打开浏览器进行预览。

说明：当自定义组件依赖 Neo 平台运行时（如 neo-ui-common、neo-ui-component-web 等平台能力、接口或上下文）时，本地预览环境无法完整模拟，仅支持在线预览（neo preview -m online）；如需在设计器的实际页面上下文中验证，可改用「外链调试」。

5. 外链调试（在 NeoCRM / 页面设计器中调试） ​

bash
neo linkDebug

提示：需在 NeoCRM 或页面设计器中开启 debug 模式，并将控制台输出的外链脚本地址加入「外部链接」。详细步骤见 CLI 使用说明 - 本地调试自定义组件。

6. 发布到 NeoCRM ​

首次发布时，先完成授权登录：

bash
neo login

neo login：通过浏览器等方式完成 授权登录，将当前环境与 NeoCRM 账号关联；登录成功后 CLI 才能执行发布等需平台鉴权的操作。

bash
neo push cmp

提示：发布前请确认 package.json 中 name 在平台内唯一、version 未与已发布版本冲突，并完成 NeoCRM 授权配置。详见 CLI 使用说明 - 发布自定义组件至 NeoCRM。