VTJ：技术架构概述

踩着两条虫
21 阅读6分钟

技术架构概述

引言

本文件为 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<br/>声明工作空间范围"]
L["lerna.json<br/>版本策略/发布命令/Nx 集成"]
N["nx.json<br/>任务默认行为/缓存/输入定义"]
PKG["packages/*<br/>核心库集合"]
PLAT["platforms/*<br/>平台实现"]
APPS["apps/*<br/>示例应用"]
DEV["dev<br/>演示应用"]
DOCS["docs<br/>文档站点"]
CREATE["create-vtj<br/>脚手架"]
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/*<br/>示例应用app/h5/uniapp/plugin/material/extension"]
end
subgraph "平台层"
WEB["platforms/web<br/>Web 平台"]
H5["platforms/h5<br/>H5 平台"]
PRO["platforms/pro<br/>Pro 平台"]
PRO_UNI["platforms/pro-uni<br/>Pro-Uni 平台"]
UNI["platforms/uni-app<br/>UniApp 平台"]
end
subgraph "核心能力层"
CORE["@vtj/core<br/>核心引擎"]
RENDER["@vtj/renderer<br/>渲染引擎"]
DESIGN["@vtj/designer<br/>可视化设计器"]
CODE["@vtj/coder<br/>代码生成器"]
MAT["@vtj/materials<br/>物料系统"]
BASE["@vtj/base<br/>基础能力"]
UTIL["@vtj/utils<br/>通用工具"]
UI["@vtj/ui<br/>UI 组件库"]
CHART["@vtj/charts<br/>图表库"]
NODE["@vtj/node<br/>Node 能力"]
ICON["@vtj/icons<br/>图标库"]
LOCAL["@vtj/local<br/>本地化/主题"]
UNI["@vtj/uni<br/>跨端适配"]
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 代码以避免平台锁定。更多信息请访问：

avatar
文章
阅读
粉丝