企业想要快速上线业务，却常被传统开发的“码农”节奏所束缚。VTJ.PRO 把 AI 的灵感与低代码的效率揉进同一个浏览器窗口，让「点几下」就Nengkan到可运行的产品原型。下面我把从零体验到部署上线的全过程，用一种不太机械、却带点小激动的方式呈现给你。

VTJ.PRO 并不像市面上那种只Neng画图的工具，它在前端直接提供了一个功Neng齐全的在线集成开发环境，所有依赖、脚手架、预览dou在云端完成。

pnpm install   # 一行命令装完依赖
pnpm run dev   # 浏览器里打开 http://localhost:3000 即可kan到工作台

只要有 Chrome 或 Edge，就Ke以像打开普通网页一样进入「设计器」界面——无需本地环境配置，也不必担心版本冲突。

VTJ.PRO 用一套自研的领域特定语言把页面结构、组件属性和业务逻辑全部序列化为 JSON。设计器里每一次拖拽、属性编辑dou会实时写进这份 DSL 文件，而后端负责持久化存储。

flowchart TD
    Designer -->|save DSL| DevService
    DevService -->|HTTP API| DslModule
    DslModule -->|TypeORM| MySQL
    MySQL -->|load DSL| Renderer
    MySQL -->|load DSL| Generator
    Generator --> Coder
    Generator --> Templates
    Generator --> Output

这种「所见即所得」的方式让非技术人员也Neng像搭积木一样完成页面布局，而后端则负责把这些 JSON 直接喂给渲染器或代码生成器。

平台内置了一个AI 代理系统，Ke以对接多种大模型。用户只需在左侧对话框输入「需要一个登录页，带验证码」，AI 会自动生成对应的 Vue SFC 以及 DSL 的修改片段。

# 示例对话
User: 我想要一个支持手机号登录并且有忘记密码链接的页面
AI: Yi为您创建 login.vue 与对应的 dsl.json，请查kan并确认。

这种交互方式把「需求」和「实现」之间的距离压到了极限，一句话就Neng产出可运行代码。

VTJ.PRO 支持三大目标平台：

Web Runtime: 基于 Vite 打包的标准 Vue SPA。

H5 Runtime: 自动适配移动端视口，实现响应式布局。

UniApp Runtime: 输出 uni-app 项目，可直接编译成小程序或 App。

只要在项目配置里切换目标标识，就会得到相应目录结构和入口文件，无需手动改动一行代码。

与传统单页 SPA 不同，VTJ.PRO 使用 Vite 的多页面模式，为不同业务场景准备了五套入口：

MainEntry

AuthEntry

DevEntry

WebEntry

H5Entry

flowchart TD    
    subgraph Browser        
        MainEntry        
        AuthEntry        
        DevEntry        
        WebEntry        
        H5Entry    
    end    
    subgraph Backend        
        AppModule        
        CoreModules        
        BizModules    
    end    
    subgraph Data        
        MySQLDB        
        OSSStorage    
    end    
    MainEntry -->|REST API| AppModule    
    AuthEntry -->|REST API| AppModule    
     …… 
   CoreModules --> MySQLDB    
   BizModules --> MySQLDB    
   CoreModules --> OSSStorage

这种划分让不同角色各自拥有专属入口，不会互相干扰，也便于后期权限细粒度控制。

NestJS 在这里扮演了 API 中枢，它把系统拆成两大块：

Cores: 用户、角色、权限等通用功Neng；

Bizz: LowcodeApp、Dsl、Agent 等与低代码直接关联的业务。

flowchart TD
   BackendRoot
   CoreMod
   BizMod
   Controllers
   Services
   BackendRoot --> CoreMod
   BackendRoot --> BizMod
   CoreMod --> Controllers
   BizMod --> Controllers
   Controllers --> Services

P M 2 为 Node.js 进程提供守护，一键启动即可进入生产状态：

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

Nginx 负责静态资源分发与反向代理，而 PM2 则管理后端服务进程，实现零宕机滚动升级。下面是一段典型的 Nginx 配置示例：

server {
    listen       80;
    server_name  vtj.example.com;
    root /home/vtj-pro/frontend/dist;
    index index.html index.htm;
    location /api/ {
        proxy_pass http://127.0.0.1:3001;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        client_max_body_size 10M;
     }
     location / {
         try_files $uri $uri/ /index.html;
     }
}

Nginx 将所有 `/api/*` 请求转发至 NestJS 服务，其余请求直接落地到前端构建产物，实现前后端彻底解耦。

克隆源码：

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

安装依赖：`pnpm install` 。

启动本地环境：`pnpm run dev`；浏览器自动打开工作台。

A I 对话："帮我Zuo一个商品列表页，要有分页和搜索框"，几秒钟后 UI Yi经渲染出来同时对应 DSL Yi写入数据库。

D S L → CodeGen：`npm run build:prod` 会调用 `@vtj/coder` 把 DSL 编译成完整 Vue 项目并打包为 zip 包。

N g i n x 部署：`scripts/publish.mjs` 把 zip 解压至 `/var/www/vtj` 并刷新 Nginx 配置即可上线。

flowchart TD
   Designer-->DevSvc
   DevSvc-->|保存 DSL JSON| DslMod
   DslMod-->|TypeORM| MySQLDB
   MySQLDB-->|读取 DSL| Renderer
   MySQLDB-->|读取 DSL| Generator
   Generator-->|使用| Coder
   Generator-->|模板目录| TemplatesDir
   Generator-->|输出 ZIP| Output