项目模板Web、H5、UniApp本文档详细介绍了 VTJ.PRO 平台用于初始化新应用的启动项目模板。这些模板提供了必要的运行时环境、配置以及与 VTJ 引擎的集成使低代码应用能够作为独立项目运行。模板概述该平台维护了三个不同的启动模板位于templates/目录下。每个模板都是一个预先配置的 Vue 3 项目专为特定的目标环境而设计。模板目标平台核心依赖主要特性Web桌面浏览器vtj/webant-design-vue针对管理后台和桌面布局进行了优化。H5移动端 Webvtj/webvant针对移动浏览器和触摸交互进行了优化。UniApp跨平台应用vtj/unidcloudio/uni-app支持 iOS、Android 和各种小程序平台。模板结构与运行时集成所有模板都遵循标准化的结构以确保与 VTJ 代码生成器和vtj/web或vtj/uni运行时库兼容。Web 和 H5 模板架构Web 和 H5 模板利用vtj/web来提供低代码渲染引擎。它们通常包含一个LocalService用于在开发期间处理数据持久化以及与 VTJ 后端的通信。标准目录结构src/main.ts: 应用入口文件。src/App.vue: 根组件。src/views/: 包含生成的页面组件。vite.config.ts: 针对 VTJ 引擎优化的构建配置。数据流运行时初始化下图说明了模板如何使用vtj/web包中的代码实体来初始化 VTJ 提供程序和渲染器。模板初始化流程打包与分发后端不直接使用templates/目录中的模板。相反它们被打包成 ZIP 文件并存储在特定位置供DslService在项目初始化期间使用。template.mjs脚本scripts/template.mjs脚本负责自动化打包过程。它执行以下操作遍历templates/目录下的web、h5和uniapp目录。将每个目录的内容打包成 ZIP 文件排除node_modules和构建产物。将生成的 ZIP 文件输出到两个位置backend/zip/: 供 NestJS 后端用于本地项目生成。zip/: 用于分发或上传到云存储。打包逻辑项目初始化工作流当用户在 VTJ 工作台中创建新项目时后端会执行一个“项目生成”出码流程该流程利用这些模板。模板选择用户选择一个平台类型Web、H5 或 UniApp。DSL 检索DslService从数据库中获取当前的应用模式。模板解压后端在backend/zip/目录中找到对应的 ZIP 文件。代码注入vtj/coder将 DSL 转换为 Vue 单文件组件。这些文件被注入到解压后的模板结构中例如注入到src/views/目录。最终打包合并后的项目模板 生成的代码被打包成 ZIP 文件并提供给用户下载或上传到 OSS。代码实体关联下图将“项目生成”的自然语言概念映射到负责该任务的具体代码实体。代码生成实体映射配置详情Web/H5 模板依赖项Web 和 H5 模板的package.json包含了定义运行时行为的关键依赖vtj/webWeb 平台的核心渲染引擎。vtj/local一个服务层允许低代码应用使用本地存储或本地 API 进行 DSL 持久化。ant-design-vue / vant用作底层物料源的组件库。UniApp 模板依赖项UniApp 模板使用了不同的依赖vtj/uni渲染器的专用版本针对 UniApp 框架及其跨平台抽象层进行了优化。dcloudio/uni-app标准的 UniApp 运行时。参考资料官网文档https://vtj.pro/在线平台https://app.vtj.pro/开源仓库https://gitee.com/newgateway/vtj