VTJ.PRO 在线应用开发平台的项目模板（Web、H5、UniApp）项目模板（Web、H5、UniApp）本文档详

项目模板（Web、H5、UniApp）

本文档详细介绍了 VTJ.PRO 平台用于初始化新应用的启动项目模板。这些模板提供了必要的运行时环境、配置以及与 VTJ 引擎的集成，使低代码应用能够作为独立项目运行。

模板概述

该平台维护了三个不同的启动模板，位于 templates/ 目录下。每个模板都是一个预先配置的 Vue 3 项目，专为特定的目标环境而设计。

模板	目标平台	核心依赖	主要特性
Web	桌面浏览器	`@vtj/web`， `ant-design-vue`	针对管理后台和桌面布局进行了优化。
H5	移动端 Web	`@vtj/web`， `vant`	针对移动浏览器和触摸交互进行了优化。
UniApp	跨平台应用	`@vtj/uni`， `@dcloudio/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/: 用于分发或上传到云存储。

打包逻辑

graph TD
    A["scripts/template.mjs"] --> B{"Scan templates/*"}
    B --> C["templates/web/"]
    B --> D["templates/h5/"]
    B --> E["templates/uniapp/"]
    C --> F["JSZip.folder().generateAsync()"]
    D --> F
    E --> F
    F --> G["backend/zip/*.zip"]
    F --> H["zip/*.zip"]

项目初始化工作流

当用户在 VTJ 工作台中创建新项目时，后端会执行一个“项目生成”（出码）流程，该流程利用这些模板。

模板选择：用户选择一个平台类型（Web、H5 或 UniApp）。
DSL 检索：DslService 从数据库中获取当前的应用模式。
模板解压：后端在 backend/zip/ 目录中找到对应的 ZIP 文件。
代码注入：
- @vtj/coder 将 DSL 转换为 Vue 单文件组件。
- 这些文件被注入到解压后的模板结构中（例如，注入到 src/views/ 目录）。
最终打包：合并后的项目（模板 + 生成的代码）被打包成 ZIP 文件，并提供给用户下载或上传到 OSS。

代码实体关联

下图将“项目生成”的自然语言概念映射到负责该任务的具体代码实体。

代码生成实体映射

graph TD
    subgraph Natural Language Space
        Init[Initialize Project]
        Gen[Generate Code]
        Pack[Package ZIP]
    end

    subgraph Code Entity Space
        DslSrv[DslService.publishFromDev]
        Coder["@vtj/coder (dslToVue)"]
        GenProj[DslService.genProject]
        ZipUtil["JSZip (scripts/template.mjs)"]
    end

    Init --> DslSrv
    Gen --> Coder
    Pack --> GenProj
    GenProj -.-> ZipUtil

配置详情

Web/H5 模板依赖项

Web 和 H5 模板的 package.json 包含了定义运行时行为的关键依赖：

@vtj/web：Web 平台的核心渲染引擎。
@vtj/local：一个服务层，允许低代码应用使用本地存储或本地 API 进行 DSL 持久化。
ant-design-vue / vant：用作底层物料源的组件库。

UniApp 模板依赖项

UniApp 模板使用了不同的依赖：

@vtj/uni：渲染器的专用版本，针对 UniApp 框架及其跨平台抽象层进行了优化。
@dcloudio/uni-app：标准的 UniApp 运行时。

参考资料

官网文档：vtj.pro/
在线平台：app.vtj.pro/
开源仓库：gitee.com/newgateway/…

VTJ.PRO 在线应用开发平台的项目模板（Web、H5、UniApp）