开发指南
本指南面向第一次接入 DragCraft 的 Vue 开发者。阅读顺序围绕一个可验证的闭环组织:先运行示例,再创建最小编辑器,然后把业务物料、字段、容器和保存运行时逐项接入。
先选择一条路径
| 目标 | 从哪里开始 | 完成标准 |
|---|---|---|
| 先确认框架能否运行 | 5 分钟跑通 | 能打开最小编辑器并完成一次属性修改 |
| 从空白 Vue 应用接入 | 创建可运行编辑器 | 能拖入一个物料、编辑属性并撤销 |
| 建立正确的数据模型 | 理解 Schema 与写入链路 | 知道保存什么、谁可以写入、如何处理导入失败 |
| 加入业务组件和配置 | 接入业务物料与属性配置 | 一个业务 type 同时拥有预览、Schema 和属性面板 |
| 接通草稿与生产页面 | 保存、加载与只读预览 | exportSchema() 可以保存,独立 Runtime 可以渲染 |
学习顺序
1. 开始使用
- 5 分钟跑通:运行仓库中的
guide-project,再把最小接入复制到自己的应用。 - 了解接入边界:确认 Designer、宿主应用和生产 Runtime 各自负责什么。
- 创建可运行编辑器:逐步定义 Material、创建实例、加载样式并释放实例。
2. 核心概念
- 框架如何协作:理解 Schema、Authoring、Presentation、Form 和宿主的关系。
- DocumentSchema:理解节点、root、container region 和导入状态。
- 状态、动作、历史与事件:理解公开写入口、结果和 undo/redo。
- 展示与空间策略:区分 Designer 设计态展示与生产 Runtime 布局。
3. 按任务扩展
公开接入边界
业务应用只直接导入以下包:
@dragcraft/designer:Designer、MaterialDefinition、Schema 类型、字段绑定和设计态扩展。@dragcraft/device-frames:可选的设备外壳、设备目录和受控选择器。@dragcraft/fields-*:可选的 UI 库字段 adapter。
其他 workspace package 是实现细节,业务应用不需要直接依赖它们。要查精确类型和导出入口,进入 参考总览;要理解稳定边界和约束,查看仓库的 Architecture Map。