Skip to content

开发指南

本指南面向第一次接入 DragCraft 的 Vue 开发者。阅读顺序围绕一个可验证的闭环组织:先运行示例,再创建最小编辑器,然后把业务物料、字段、容器和保存运行时逐项接入。

先选择一条路径

目标从哪里开始完成标准
先确认框架能否运行5 分钟跑通能打开最小编辑器并完成一次属性修改
从空白 Vue 应用接入创建可运行编辑器能拖入一个物料、编辑属性并撤销
建立正确的数据模型理解 Schema 与写入链路知道保存什么、谁可以写入、如何处理导入失败
加入业务组件和配置接入业务物料与属性配置一个业务 type 同时拥有预览、Schema 和属性面板
接通草稿与生产页面保存、加载与只读预览exportSchema() 可以保存,独立 Runtime 可以渲染

学习顺序

1. 开始使用

  • 5 分钟跑通:运行仓库中的 guide-project,再把最小接入复制到自己的应用。
  • 了解接入边界:确认 Designer、宿主应用和生产 Runtime 各自负责什么。
  • 创建可运行编辑器:逐步定义 Material、创建实例、加载样式并释放实例。

2. 核心概念

3. 按任务扩展

公开接入边界

业务应用只直接导入以下包:

  • @dragcraft/designer:Designer、MaterialDefinition、Schema 类型、字段绑定和设计态扩展。
  • @dragcraft/device-frames:可选的设备外壳、设备目录和受控选择器。
  • @dragcraft/fields-*:可选的 UI 库字段 adapter。

其他 workspace package 是实现细节,业务应用不需要直接依赖它们。要查精确类型和导出入口,进入 参考总览;要理解稳定边界和约束,查看仓库的 Architecture Map