VTJ：技术架构概述

技术架构概述

引言

本文件为 VTJ 低代码平台的技术架构概述，系统性阐述平台采用的 Monorepo 架构设计（Lerna + PNPM 工作空间 + Nx 缓存与任务编排）、整体技术栈（Vue3 + TypeScript + Vite + ElementPlus + Axios + ECharts 等）的集成方案、分层架构（核心引擎层、可视化设计器层、渲染引擎层、代码生成器层、应用层、平台层）的职责划分与相互关系、模块化设计理念（15+ 核心包的功能定位与依赖关系）、插件化扩展机制与物料系统的架构设计，并给出技术选型理由与架构决策背景，帮助开发者快速理解并高效参与平台建设。

项目结构

VTJ 采用 Monorepo 组织方式，通过 Lerna + PNPM 工作空间 + Nx 进行统一管理与构建调度。工作空间包含 packages（核心库）、platforms（平台实现）、apps（示例应用）、create-vtj（脚手架）、dev/docs（演示与文档）等目录，所有子包均以 workspace:~ 方式进行内部依赖解析，确保版本一致性与增量构建优化。

graph TB subgraph "Monorepo 工作空间" P["pnpm-workspace.yaml
声明工作空间范围"] L["lerna.json
版本策略/发布命令/Nx 集成"] N["nx.json
任务默认行为/缓存/输入定义"] PKG["packages/*
核心库集合"] PLAT["platforms/*
平台实现"] APPS["apps/*
示例应用"] DEV["dev
演示应用"] DOCS["docs
文档站点"] CREATE["create-vtj
脚手架"] end P --> PKG P --> PLAT P --> APPS P --> DEV P --> DOCS P --> CREATE L --> PKG L --> PLAT L --> APPS L --> DEV L --> DOCS L --> CREATE N --> PKG N --> PLAT N --> APPS N --> DEV N --> DOCS N --> CREATE

核心组件

VTJ 的核心库（packages/*）是平台能力的基石，涵盖基础能力、UI 组件、图表、渲染、设计器、代码生成、物料系统、通用工具、Node 能力等。以下为关键包及其定位概览：

• @vtj/base：基础数据模型、事件总线、工具函数、类型定义等底层能力
• @vtj/utils：网络请求、Cookie、加密、日期、序列化等通用工具
• @vtj/ui：基于 ElementPlus 的业务组件库，含表格、表单、对话框等
• @vtj/charts：基于 ECharts 的可视化图表库
• @vtj/core：核心引擎，承载页面模型、节点树、执行上下文等
• @vtj/renderer：渲染引擎，负责将核心模型渲染为可交互视图
• @vtj/designer：可视化设计器，提供拖拽布局、属性设置、预览与导出
• @vtj/coder：代码生成器，将模型转换为可运行的前端代码
• @vtj/materials：物料系统，统一管理组件、区块、模板的元数据与资源
• @vtj/node：Node 端能力，提供文件系统操作、HTTP 请求等
• @vtj/uni：跨端适配层，统一多端渲染与能力抽象
• @vtj/icons：图标库
• @vtj/local：本地化与主题相关能力
• 其他：parser、cli、ui、uni 等

这些包之间通过 workspace:~ 保持版本同步，构建与测试由 Lerna 统一调度，Nx 提供任务依赖与缓存加速。

架构总览

VTJ 采用"核心引擎 + 设计器 + 渲染器 + 代码生成器 + 应用层 + 平台层"的分层架构。核心引擎负责页面模型与执行；设计器负责可视化编辑与导出；渲染器负责将模型渲染为真实视图；代码生成器负责将模型转为可运行代码；应用层承载具体业务场景；平台层提供多端与生态扩展。

graph TB subgraph "应用层" APP["apps/*
示例应用app/h5/uniapp/plugin/material/extension"] end subgraph "平台层" WEB["platforms/web
Web 平台"] H5["platforms/h5
H5 平台"] PRO["platforms/pro
Pro 平台"] PRO_UNI["platforms/pro-uni
Pro-Uni 平台"] UNI["platforms/uni-app
UniApp 平台"] end subgraph "核心能力层" CORE["@vtj/core
核心引擎"] RENDER["@vtj/renderer
渲染引擎"] DESIGN["@vtj/designer
可视化设计器"] CODE["@vtj/coder
代码生成器"] MAT["@vtj/materials
物料系统"] BASE["@vtj/base
基础能力"] UTIL["@vtj/utils
通用工具"] UI["@vtj/ui
UI 组件库"] CHART["@vtj/charts
图表库"] NODE["@vtj/node
Node 能力"] ICON["@vtj/icons
图标库"] LOCAL["@vtj/local
本地化/主题"] UNI["@vtj/uni
跨端适配"] end APP --> DESIGN APP --> RENDER APP --> CODE DESIGN --> CORE DESIGN --> RENDER DESIGN --> UI DESIGN --> UTIL DESIGN --> ICON RENDER --> CORE RENDER --> UTIL CODE --> CORE CODE --> BASE MAT --> CORE MAT --> UI MAT --> CHART CORE --> BASE CORE --> UTIL UI --> ICON UI --> UTIL CHART --> UTIL NODE --> UTIL WEB --> CORE WEB --> RENDER WEB --> UI H5 --> CORE H5 --> RENDER H5 --> UI PRO --> CORE PRO --> RENDER PRO --> UI PRO_UNI --> CORE PRO_UNI --> RENDER PRO_UNI --> UI UNI --> CORE UNI --> RENDER UNI --> UI

详细组件分析

核心引擎层（@vtj/core）

• 职责：承载页面模型、节点树、执行上下文、事件与生命周期管理
• 关键点：依赖 @vtj/base，提供统一的模型与执行接口，供渲染器与设计器消费
• 复杂度：O(N) 节点遍历与 O(1) 属性访问（按需）

可视化设计器层（@vtj/designer）

• 职责：提供拖拽布局、属性面板、快捷键、Markdown/代码高亮、截图预览等功能
• 关键点：依赖 @vtj/core、@vtj/renderer、@vtj/ui、@vtj/uni、@vtj/utils，以及 Monaco 编辑器、highlight.js、marked、html2canvas 等
• 扩展性：支持插件化与物料系统集成

渲染引擎层（@vtj/renderer）

• 职责：将核心模型渲染为真实视图，处理事件绑定、条件渲染、循环渲染等
• 关键点：依赖 @vtj/core 与 @vtj/utils，支持多端渲染与跨端适配

代码生成器层（@vtj/coder）

• 职责：将模型转换为可运行的前端代码，支持格式化与模板化输出
• 关键点：依赖 @vtj/base 与 @vtj/core，使用 prettier 进行代码美化

应用层（apps/*）

• apps/app：标准 Web 应用示例
• apps/h5：H5 示例
• apps/uniapp：UniApp 示例
• apps/plugin：插件示例
• apps/material：物料示例
• apps/extension：扩展示例
• 特点：作为最小可用示例，展示设计器、渲染器、代码生成器在真实应用中的组合使用

平台层（platforms/*）

• platforms/web：Web 平台实现
• platforms/h5：H5 平台实现
• platforms/pro：Pro 平台实现
• platforms/pro-uni：Pro-Uni 平台实现
• platforms/uni-app：UniApp 平台实现
• 特点：封装平台特定的路由、插件、样式与能力，复用核心能力

模块化与物料系统

• 模块化：15+ 核心包，按领域拆分，通过 workspace:~ 解耦版本与依赖
• 物料系统：@vtj/materials 统一管理组件、区块、模板的元数据与资源，支持设计器与渲染器消费

插件化扩展机制

• 设计器侧：通过 @vue/devtools-* 与 Monaco 编辑器实现调试与代码编辑能力
• 物料侧：通过物料描述与资源注册，实现组件/区块/模板的动态加载与渲染
• 平台侧：通过平台配置与路由模块化，实现多端能力扩展

依赖分析

• 内部依赖：各包通过 workspace:~ 声明内部依赖，避免版本漂移，保证一致性
• 外部依赖：Vue3、ElementPlus、ECharts、Axios、Monaco Editor、highlight.js、marked、html2canvas、prettier 等
• 任务编排：Lerna 统一执行测试与构建；Nx 定义 targetDefaults，自动处理依赖任务顺序与缓存

graph LR subgraph "内部依赖" BASE["@vtj/base"] UTIL["@vtj/utils"] UI["@vtj/ui"] CHART["@vtj/charts"] CORE["@vtj/core"] RENDER["@vtj/renderer"] DESIGN["@vtj/designer"] CODE["@vtj/coder"] NODE["@vtj/node"] MAT["@vtj/materials"] UNI["@vtj/uni"] ICON["@vtj/icons"] LOCAL["@vtj/local"] end BASE --> CORE BASE --> UTIL BASE --> NODE UTIL --> RENDER UTIL --> UI UTIL --> CHART UTIL --> NODE UI --> ICON CORE --> RENDER CORE --> CODE RENDER --> UI RENDER --> UTIL DESIGN --> CORE DESIGN --> RENDER DESIGN --> UI DESIGN --> UTIL DESIGN --> ICON CODE --> CORE CODE --> BASE MAT --> UI MAT --> CHART MAT --> CORE UNI --> CORE UNI --> RENDER UNI --> UI

性能考虑

• 构建性能：Vite + TS 构建，配合 Nx 任务缓存与依赖拓扑，减少重复构建
• 运行性能：渲染器按需渲染、事件委托、虚拟列表（如 vxe-table）提升大表格性能
• 体积控制：按需引入 ElementPlus 组件与图标，避免全量打包
• 开发体验：Monorepo 中的增量构建与并行任务，缩短迭代周期

故障排查指南

• 构建失败：检查 lerna.json 与 nx.json 的 targetDefaults 是否正确，确认依赖顺序
• 依赖冲突：使用 pnpm-workspace.yaml 统一管理工作空间，避免重复安装
• 测试异常：确认各包的 test 脚本与 vitest 配置一致，必要时清理缓存后重试
• 发布问题：遵循 lerna 的版本策略与提交规范，确保 conventional commits 生效

结论

VTJ 通过 Lerna + PNPM 工作空间 + Nx 的 Monorepo 架构，实现了多端、多场景的低代码平台能力复用与快速迭代。以 Vue3 + TypeScript + Vite 为核心技术栈，结合 ElementPlus、ECharts、Axios 等成熟生态，构建了从模型到渲染再到代码生成的完整闭环。模块化与物料系统支撑插件化扩展，平台层与应用层解耦，便于快速落地不同业务场景。

附录

• 技术选型理由
  • Vue3：成熟生态、组合式 API、性能优异
  • TypeScript：强类型保障、更好的 IDE 支持与可维护性
  • Vite：极速冷启动与热更新，适合多应用与多平台开发
  • ElementPlus：完善的桌面端组件体系，与 Vue3 高度契合
  • ECharts：专业可视化能力，满足复杂报表与图表需求
  • Axios：稳定 HTTP 客户端，易于 Mock 与拦截器扩展
  • Lerna/PNPM/Nx：Monorepo 管理与任务编排，提升团队协作效率

参考资料

VTJ.PRO 是一个开源的、AI 驱动的 Vue 3 企业级应用开发平台。它通过 AI 智能体与可视化编排实现高效开发，并支持导出标准 Vue 代码以避免平台锁定。更多信息请访问：

• 📘 官方文档：vtj.pro/
• 🌐 在线平台：app.vtj.pro/
• 📦 开源仓库：gitee.com/newgateway/...