基于TypeScript + Vue3 打造以AI驱动的低代码平台

目的和范围

本文档全面概述了VTJ低代码开发平台（LCDP），这是一个支持快速创建和部署应用程序的多平台开发环境。平台采用Vue.js前端应用与NestJS后端API架构，支持多种部署目标，包括Web浏览器、移动H5应用和跨平台UniApp环境。

本文档涵盖平台整体架构、核心技术和系统组织。

系统架构概述

VTJ LCDP采用现代化Web应用架构，实现前端展示层、后端服务层和多平台构建系统的清晰分离。

整体架构设计

分层架构模式

平台采用分层架构设计，各层职责明确：

1. 用户界面层：基于Vue.js的可视化开发环境
2. 应用服务层：NestJS实现的核心业务逻辑
3. 数据服务层：统一API网关和微服务架构
4. 基础设施层：容器化部署和云原生支持

多平台构建系统

平台支持四个核心构建目标，每个目标针对特定部署场景优化：

构建脚本配置说明

构建系统通过npm脚本支持环境特定配置：

bash

代码语言：javascript

代码运行次数：0

运行

AI代码解释

# 开发环境 (热重载)
npm run dev  # ENV_TYPE=local，启动开发服务器
# SIT环境构建 (系统集成测试)
npm run sit:main     # ENV_TYPE=sit BUILD_TYPE=main
npm run sit:web      # ENV_TYPE=sit BUILD_TYPE=web
npm run sit:h5       # ENV_TYPE=sit BUILD_TYPE=h5
npm run sit:uniapp   # ENV_TYPE=sit BUILD_TYPE=uniapp
# 生产环境构建
npm run build:main     # ENV_TYPE=live BUILD_TYPE=main
npm run build:web      # ENV_TYPE=live BUILD_TYPE=web
npm run build:h5       # ENV_TYPE=live BUILD_TYPE=h5
npm run build:uniapp   # ENV_TYPE=live BUILD_TYPE=uniapp

核心技术与依赖项

前端核心依赖

开发工具链

后端模块架构

后端采用模块化NestJS架构，包含以下核心功能模块：

核心模块功能说明

开发环境配置

平台支持三种环境配置，满足不同阶段需求：

构建配置关键技术

1. 多目标支持：支持12种环境与平台组合配置，满足全场景需求
2. TypeScript处理：通过vue-tsc实现严格类型检查和编译
3. 环境变量注入：使用cross-env实现跨平台环境变量管理
4. 构建优化：生产环境启用代码压缩、Tree Shaking和代码分割
5. 增量构建：开发环境支持模块热替换(HMR)，提升开发效率

VTJ低代码平台通过模块化架构和灵活的多平台构建系统，为开发者提供高效的应用开发和部署体验。

项目脚本

项目结构

本项目使用 @vtj/cli 搭建，基于 Vite + Vue3 + TypeScript 技术栈。采用多平台应用页面入口设计，实现环境隔离和优化打包体积。

vite.config.ts 中配置了多入口打包：

typescript

代码语言：javascript

代码运行次数：0

运行

AI代码解释

const pages = {
  // 平台主应用：包含应用管理和设计器
  main: './index.html',
  // Web应用预览
  web: './web/index.html',
  // H5应用预览
  h5: './h5/index.html',
  // UniApp应用预览
  uniapp: './uniapp/index.html'
};

工程目录说明

项目结构与标准工程基本一致，以下是 VTJ 特有的重要目录说明：

最佳实践

设计器集成

设计器实现位于 /src/views/designer.vue，所有平台共用同一设计器，通过加载项目 DSL 的 platform 属性确定目标平台功能。

设计器路由格式：/:platform/:id

• platform: 平台标识（web、h5、uniapp）
• id: 应用标识（对应项目 DSL 的 id 字段）

渲染器集成

各平台渲染器实现文件：

• Web: /src/platform/web/main.ts
• H5: /src/platform/h5/main.ts
• UniApp: /src/platform/uniapp/main.ts

自定义 Service

低代码平台的项目、文件和历史记录通过 Service 进行存储管理。/src/shared/service.ts 实现了远程 Service，将数据保存至后端数据库。

自定义 OpenAPI

OpenAPI 提供低代码平台的远程服务能力，如页面模板和 AI 助手功能。/src/extension/openapi.ts 实现了自定义 OpenAPI，您可以根据需求调整 API 接口，只需确保函数签名符合类型要求。

设计器扩展

如需扩展设计器功能，可通过 /src/extension/install.ts 进行开发。可用平台 API 包括：

• widgetManager
• depsManager
• setterManager

后端实现

后端实现可自行设计，只需满足 Service 和 OpenAPI 的接口规范。具体实现细节请参考 docs 目录下的文档。

重要说明

• API方法统一在 /src/apis 目录下定义，函数都带有TS签名和注释， 可以按自己的需求更换对应接口。
• 代码中的Access是为了适配官方接口服务的权限控制，如果你改为自己实现的服务，可以不需要Access
• 请求工具使用了 setGlobalRequest 配置全局的request, 如果在设计器中的设计视图和预览也需要用相同的request, 可以通过参数传入到引擎和createProvider。

代码语言：typescript

AI代码解释

// 传入引擎
const engine = new Engine({
  //省略其他代码
  adapter: {
    request
  }
});
// 传入 createProvider
const { provider, onReady } = createProvider({
  //省略其他代码
  adapter: {
    request
  }
});

• 如果您不需要模版和AI功能，就不需要定义OpenAPI， 只需要把引擎的remote参数设置为null就可以关闭这两个功能。

设计器交互

在线体验

Demo:  https://vtj.pro/demo/