无需写代码，AI帮你从设计稿生成完整应用
在数字化转型的浪潮中，低代码开发已成为企业降本增效的利器。今天要介绍的 VTJ.PRO，不仅是一个低代码平台，更是一个融合了 AI 能力的在线开发环境。
它让开发者（甚至非技术人员）能够通过可视化拖拽和 AI 对话的方式，快速构建跨平台应用。最让人惊艳的是，它可以直接输出 Web、H5 和 UniApp 三端的独立项目代码——真正的“一次设计，多端交付”。
![]()
01 平台总览：在浏览器里完成一切
VTJ.PRO 是一个 AI 驱动的低代码应用开发平台，在浏览器中提供了一套功能完整的在线集成开发环境（IDE）。
它的核心亮点可以概括为三个关键词：
- 可视化设计：拖拽式搭建页面，所见即所得
- AI 辅助生成：对话式生成代码和 DSL（领域特定语言）
- 多平台输出：一键生成 Web、H5、UniApp 项目
![]()
整个平台基于 Vue 3 + TypeScript + NestJS 构建，采用单仓库（monorepo）架构，将前端、后端、模板和文档统一管理。
02 核心能力：DSL + AI + 多平台输出
2.1 可视化设计与 DSL 管道
平台的核心是一套 DSL（领域特定语言），它将 UI 组件、页面和模块描述为 JSON 结构。可视化设计器生成 DSL 后，后端负责存储，前端渲染器则将其实时解析为 Vue 组件——整个过程无需构建步骤，真正做到“所见即所得”。
核心管道：设计 → DSL → 运行时 / 代码生成
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 文件存储
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 流程
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 即可看到平台界面。
![]()
06 生产部署：Nginx + PM2
基础设施架构
生产环境采用 Nginx 作为反向代理和静态资源服务器，PM2 管理 Node.js 后端进程。
Nginx 的三大职责：
- 静态托管：提供
frontend/dist 编译后的前端文件
- API 代理：将
/api/ 请求转发到 NestJS 后端（默认 3000 端口）
- 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 不仅仅是一个低代码平台，它代表了一种新的开发范式：
- 降低门槛：可视化设计 + AI 辅助，让非技术人员也能参与应用构建
- 提升效率：一次设计，多端输出，告别重复劳动
- 保持灵活性：生成的代码是标准的 Vue 项目，可以自由扩展和定制
- 架构清晰：前后端分离、模块化设计、核心与业务解耦，易于维护和二次开发
如果你是技术负责人，正在寻找一种既能快速交付又能保证代码质量的应用开发方案；如果你是全栈开发者，希望从重复的 CRUD 中解放出来——VTJ.PRO 值得你深入探索。
本文内容基于 VTJ.PRO 官方技术文档整理，更多细节请查阅项目文档。
关注我们，获取更多低代码和 AI 开发干货！
参考资料
