核心架构
本文档介绍了为 VTJ 低代码平台提供支持的基本架构组件，包括 Engine 编排层、Provider 服务系统、数据模型和代码生成管道。有关 UI 组件库和 widget 系统的信息，请参阅 UI 组件库 。有关特定于平台的实施，请参阅平台实施 。
引擎、提供商和服务层
VTJ 架构围绕三个主要编排组件构建：用于设计时管理的 Engine、用于运行时服务的 Provider 和用于基于 iframe 的渲染的 Simulator。
设计时引擎架构
类 Engine 充当设计时环境的中央业务流程协调程序。它通过几个关键职责来管理整个生命周期：
- 项目管理 ：通过
Service界面协调ProjectModel实例和文件操作 - 模拟器控制 ：管理模拟器以进行基于 iframe 的组件渲染和预览
- Asset Management ：通过
Assets类处理材质加载和组件注册 - 事件协调 ：绑定到模型事件以实现实时更新和持久性
Provider 服务架构
Provider 类跨不同执行模式（ContextMode.Design、ContextMode.Runtime、ContextMode.Raw）管理运行时服务和资源加载。关键架构模式包括：
- 资源加载 ：根据项目配置异步加载依赖项、材料和组件
- API 管理 ：通过
createSchemaApis创建和管理基于 schema 的 API - 组件注册 ：动态组件解析和 Vue 插件安装
- DSL 渲染 ：用于创建将 BlockSchema 转换为 Vue 组件的渲染器的工厂方法
项目模型和块模型
数据层以反应式模型为中心，这些模型通过事件驱动架构管理项目状态和组件定义。
模型层次结构和事件
ProjectModel 管理完整的项目状态，包括页面、块、依赖项和配置。它实现了几个关键模式：
- 文件管理 ：
PageFile和BlockFile的 CRUD 操作，包括验证和事件发出 - 依存关系管理 ：外部库和材料的动态加载和版本管理
- 状态同步 ：事件驱动的更新，通过
Service层触发持久性 - 平台适配 ：支持不同目标平台（
web、h5、uniapp）
关键作包括用于文件管理的 createPage（）、createBlock（）、setDeps（） 和 active（）， 每个作都会触发相应的事件以进行 UI 同步。
块模型和节点层次结构
BlockModel 将单个组件或页面表示为 NodeModel 实例的树。该架构支持：
- 层次结构 ：基于插槽的内容组织的父子关系
- 组件集成 ：通过 MaterialDescription 和 NodeFrom 配置动态加载组件
- 状态管理 ：具有锁定、可见性和验证状态的响应式属性
- 序列化：运行时模型和可序列化 BlockSchema/NodeSchema 之间的双向转换
代码生成和解析管道
VTJ 通过复杂的解析和代码生成管道实现 Vue 单文件组件 （SFC） 和低代码 DSL 之间的双向转换。
DSL 到组件渲染管道
渲染管道通过几个阶段将 BlockSchema 定义转换为可执行的 Vue 组件：
- DSL 加载 ：createLoader 函数创建一个递归解析组件依赖关系的 BlockLoader
- 组件解析 ：NodeFrom 配置指定如何加载组件（
Schema、UrlSchema、Plugin类型） - 异步组件创建 ：Vue 的
defineAsyncComponent支持通过 loaders 进行缓存的延迟加载组件 - 上下文集成 ：
CreateRendererOptions提供包括 Vue 实例、组件库和 API 在内的运行时上下文
Vue SFC 解析和代码生成
双向转换系统支持视觉设计和代码之间的无缝过渡：
- 解析器集成 ：
@vtj/parser将 Vue SFC 转换为BlockSchema以进行可视化编辑 - 代码生成 ：
@vtj/coder包从BlockSchema定义生成完整的 Vue 项目 - 服务层 ：通过
Service.saveFile（）和Service.getFile（）进行的文件作保持同步 - AI 集成 ：
Engine.applyAI（）方法使 AI 生成的 DSL 能够集成到设计工作流程中
Engine.genSource（） 方法编排完整的代码生成过程，而 createRawPage（） 支持具有可视化组件和基于代码的组件的混合工作流。
运行时架构和上下文管理
运行时系统通过分层上下文架构管理不同模式和平台上的组件执行
上下文和模式管理
运行时体系结构根据 ContextMode 调整行为：
- 设计模式 ：完整的设计时功能，带有热重载和可视化编辑工具
- 运行时模式 ：针对生产部署优化组件执行
- Raw 模式：直接执行 Vue 组件，无低代码开销
模拟器会创建一个隔离的 iframe 环境 （contentWindow），其中包含自己的 SimulatorEnv：
- 组件注册表：从 Materials 和 dependencies 解析的组件
- API 层 ：具有模拟数据支持的基于 Schema 的 API
- 平台适配器 ：
Web与uniapp平台的不同应用程序创建策略
多平台运行时适配
特定于平台的运行时创建可处理不同的执行环境：
- Web 平台 ：带有 Vue 路由器和 DOM 安装的标准 Vue 应用程序
- UniApp 平台 ：使用
setupUniApp（）和UniH5运行时集成进行专门设置 - 插件安装 ：根据依赖项配置自动安装库插件
- 路由器配置：具有不同历史模式的平台适当路由设置
Provider.install（） 方法管理跨平台的插件安装和全局属性设置。