重磅！这款AI低代码平台火了：拖拽生成应用，一键输出Web/H5/UniApp

重磅！这款AI低代码平台火了：拖拽生成应用，一键输出Web/H5/UniApp

无需写代码，AI帮你从设计稿生成完整应用

在数字化转型的浪潮中，低代码开发已成为企业降本增效的利器。今天要介绍的 VTJ.PRO，不仅是一个低代码平台，更是一个融合了 AI 能力的在线开发环境。

它让开发者（甚至非技术人员）能够通过可视化拖拽和 AI 对话的方式，快速构建跨平台应用。最让人惊艳的是，它可以直接输出 Web、H5 和 UniApp 三端的独立项目代码——真正的“一次设计，多端交付”。

---

01 平台总览：在浏览器里完成一切

VTJ.PRO 是一个 AI 驱动的低代码应用开发平台，在浏览器中提供了一套功能完整的在线集成开发环境（IDE）。

它的核心亮点可以概括为三个关键词：

• 可视化设计：拖拽式搭建页面，所见即所得
• AI 辅助生成：对话式生成代码和 DSL（领域特定语言）
• 多平台输出：一键生成 Web、H5、UniApp 项目

整个平台基于 Vue 3 + TypeScript + NestJS 构建，采用单仓库（monorepo）架构，将前端、后端、模板和文档统一管理。

flowchart TD
    Root["vtj-pro-test (monorepo root)"]
    Backend["backend/"]
    Frontend["frontend/"]
    Templates["templates/"]
    Scripts["scripts/"]
    Docs["_docs/"]

    Root --> Backend
    Root --> Frontend
    Root --> Templates
    Root --> Scripts
    Root --> Docs

---

02 核心能力：DSL + AI + 多平台输出

2.1 可视化设计与 DSL 管道

平台的核心是一套 DSL（领域特定语言），它将 UI 组件、页面和模块描述为 JSON 结构。可视化设计器生成 DSL 后，后端负责存储，前端渲染器则将其实时解析为 Vue 组件——整个过程无需构建步骤，真正做到“所见即所得”。

核心管道：设计 → DSL → 运行时 / 代码生成

flowchart TD
    Designer["@vtj/pro Visual Designer"]
    DevSvc["DevService"]
    DslMod["DslModule"]
    MySQL["MySQL — dsl table"]
    Renderer["@vtj/renderer (Runtime)"]
    Coder["@vtj/coder (Code Gen)"]
    Generator["generator.ts"]
    TemplatesDir["templates/"]
    Output["Standalone Vue Project (.zip)"]

    Designer -->|save DSL JSON| DevSvc
    DevSvc -->|HTTP API| DslMod
    DslMod -->|TypeORM| MySQL
    MySQL -->|load DSL| Renderer
    MySQL -->|load DSL| Generator
    Generator -->|uses| Coder
    Generator -->|scaffolds from| TemplatesDir
    Generator --> Output

2.2 AI 代码生成

平台内置了 AI 代理系统，可以连接多种 LLM 模型。通过精心设计的提示词模板，AI 能够生成结构化的 Vue SFC 代码和 DSL 修改，开发者只需要在对话框中描述需求，AI 就能帮你完成代码编写。

2.3 多平台输出（出码）

最实用的功能莫过于“出码”。代码生成管道可以将存储的 DSL 转换为独立的 Vue 项目，支持三个目标平台：

• Web：标准 Web 应用
• H5：移动端 Web 应用
• UniApp：跨平台原生应用（可编译到 iOS、Android 等）

每个平台都有对应的脚手架模板，确保生成的代码开箱即用。

---

03 技术架构：三层架构 + 多入口设计

3.1 整体架构

系统采用经典的三层架构：

• 前端：Vue 3 多入口 SPA，通过 Vite 构建
• 后端：NestJS 提供 REST API，处理业务逻辑
• 数据层：MySQL 主库 + OSS 文件存储

flowchart TD
    subgraph Browser[Browser]
        MainEntry["main entry (admin + workbench)"]
        AuthEntry["auth entry (login/register)"]
        DevEntry["dev entry (AppDesigner / TemplateDesigner)"]
        WebEntry["web entry (Web runtime)"]
        H5Entry["h5 entry (H5 runtime)"]
    end

    subgraph Backend["NestJS Backend"]
        AppModule["AppModule"]
        CoreModules["Core Modules: User, Role, Permission..."]
        BizModules["Business Modules: LowcodeApp, Dsl, Agent..."]
    end

    subgraph Data[Data Layer]
        MySQLDB["MySQL Database"]
        OSSStorage["OSS / Local File Storage"]
    end

    MainEntry -->|REST API| AppModule
    AuthEntry -->|REST API| AppModule
    DevEntry -->|REST API| AppModule
    WebEntry -->|REST API| AppModule
    H5Entry -->|REST API| AppModule

    AppModule --> CoreModules
    AppModule --> BizModules

    CoreModules --> MySQLDB
    BizModules --> MySQLDB
    CoreModules --> OSSStorage

3.2 前端多入口

前端通过 Vite 的多页面构建，产生了 6 个不同的入口点，分别服务于不同的用户场景：

入口点	HTML 文件	用途
main	index.html	管理面板 + 用户工作台
auth	auth.html	登录、注册、密码重置
dev	dev.html	可视化设计器
web	web.html	Web 平台运行时
h5	h5.html	移动 H5 平台运行时
uniapp	—	UniApp 跨平台运行时

每个平台运行时都包含一个 adapter.ts，用于配置平台特定行为并连接到渲染器。

前端入口点到后端 API 流程

flowchart TD
    subgraph "FrontendEntryPoints[Frontend Entry Points]"
        Main["main"]
        Auth["auth"]
        Dev["dev"]
        Web["web"]
        H5["h5"]
    end

    subgraph "APIs[frontend/src/apis/]"
        UserApi["user.ts"]
        AppApi["app.ts"]
        DslApi["dsl.ts"]
        TemplateApi["template.ts"]
        AgentApi["agent.ts"]
    end

    subgraph "Controllers[Backend Controllers]"
        UserCtrl["UserController"]
        AppCtrl["LowcodeAppController"]
        DslCtrl["DslController"]
        TemplateCtrl["TemplateController"]
        AgentCtrl["AgentController"]
    end

    Main --> UserApi
    Main --> AppApi
    Auth --> UserApi
    Dev --> DslApi
    Dev --> AgentApi
    Web --> DslApi

    UserApi --> UserCtrl
    AppApi --> AppCtrl
    DslApi --> DslCtrl
    AgentApi --> AgentCtrl

---

04 后端模块：核心与业务分离

后端模块的组织非常清晰，分为 核心模块 和 业务模块 两大块：

核心模块（系统级能力）

模块	职责
UserModule	用户 CRUD、JWT 认证、OAuth
PermissionModule	基于 CASL 的 RBAC 权限控制
RoleModule	角色管理
LlmModelModule	LLM 提供商配置与缓存
OssModule	文件上传（阿里云 OSS / 本地）
EmailModule	邮件验证

业务模块（低代码核心能力）

模块	职责
LowcodeAppModule	应用 CRUD 与版本管理
DslModule	DSL 存储、开发/生产环境、代码生成
TemplateModule	模板管理与版本管理
AgentModule	AI 主题、聊天、提示词
OrderModule	订单处理
ProductModule	产品定义（Tokens, Plus, Pro）

这种分层设计让系统既有良好的扩展性，又能保持核心能力的稳定性。

---

05 快速上手：从零到运行

环境要求

• Node.js（推荐 LTS 版本）
• pnpm 包管理器
• MySQL 数据库
• Redis（可选，用于缓存）

初始化流程

1. 克隆仓库

git clone https://gitee.com/newgateway/vtj.git
cd vtj

2. 安装依赖

根目录下有 .npmrc 文件，配置了特殊的提升策略，确保依赖正确安装：

hoist=true
shamefully-hoist=true
node-linker=hoisted
registry=https://registry.npmmirror.com

运行安装命令：

pnpm install

3. 配置环境变量

• 后端：复制 backend/.env.example 为 backend/.env，填入数据库连接信息
• 前端：复制 frontend/.env.example 为 frontend/.env，设置 VITE_API_URL

4. 数据库初始化

后端启动时会自动运行迁移和种子脚本，创建表并填充初始数据（角色、权限、LLM 配置等）。

5. 打包模板

在生成项目代码前，需要先打包模板：

node scripts/template.mjs

这个脚本会将 templates/ 目录压缩并放置到 backend/zip/ 中。

6. 启动服务

• 后端：

cd backend
npm run start:dev

• 前端：

cd frontend
npm run dev

访问 http://localhost:5173 即可看到平台界面。

flowchart
    subgraph Configuration Space
        NPMRC[".npmrc"]
        ENV_BACKEND["backend/.env"]
        ENV_FRONTEND["frontend/.env"]
    end
    subgraph Process Space
        PNPM_INSTALL["pnpm install"]
        DB_MIGRATION["MigrationService.run()"]
        VITE_DEV["vite dev"]
        NEST_START["nest start"]
    end
    subgraph Code Entity Space
        NODE_MODULES["root/node_modules"]
        DB_SCHEMA["MySQL Tables"]
        FRONTEND_APP["Vue 3 Workbench"]
    end

    NPMRC -- Configures --> PNPM_INSTALL
    PNPM_INSTALL -- Generates --> NODE_MODULES
    ENV_BACKEND -- Configures --> NEST_START
    NEST_START -- Triggers --> DB_MIGRATION
    DB_MIGRATION -- Creates --> DB_SCHEMA
    ENV_FRONTEND -- Configures --> VITE_DEV
    VITE_DEV -- Serves --> FRONTEND_APP

---

06 生产部署：Nginx + PM2

基础设施架构

生产环境采用 Nginx 作为反向代理和静态资源服务器，PM2 管理 Node.js 后端进程。

Nginx 的三大职责：

1. 静态托管：提供 frontend/dist 编译后的前端文件
2. API 代理：将 /api/ 请求转发到 NestJS 后端（默认 3000 端口）
3. SPA 路由：使用 try_files 支持客户端路由

关键 Nginx 配置示例：

root /home/vtj-pro/frontend/dist;
client_max_body_size 10M;

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header X-Real-IP $remote_addr;
}

location / {
    try_files $uri $uri/ /index.html;
}

PM2 进程管理

pm2 start backend/dist/main.js --name "vtj-pro-api"

后端日志默认输出到 logs/ 目录。

发布打包

平台提供了自动化打包脚本 scripts/publish.mjs，可以生成两种部署变体：

变体	目标环境	特点
完整版	私有云/本地部署	包含所有依赖、本地存储驱动、完整模板库
云版	托管式 SaaS	优化云环境，依赖外部 OSS 服务

---

07 总结：VTJ.PRO 的核心价值

VTJ.PRO 不仅仅是一个低代码平台，它代表了一种新的开发范式：

1. 降低门槛：可视化设计 + AI 辅助，让非技术人员也能参与应用构建
2. 提升效率：一次设计，多端输出，告别重复劳动
3. 保持灵活性：生成的代码是标准的 Vue 项目，可以自由扩展和定制
4. 架构清晰：前后端分离、模块化设计、核心与业务解耦，易于维护和二次开发

如果你是技术负责人，正在寻找一种既能快速交付又能保证代码质量的应用开发方案；如果你是全栈开发者，希望从重复的 CRUD 中解放出来——VTJ.PRO 值得你深入探索。

---

本文内容基于 VTJ.PRO 官方技术文档整理，更多细节请查阅项目文档。

关注我们，获取更多低代码和 AI 开发干货！