项目模板（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/...