本文档详细介绍了 VTJ 低代码平台的 monorepo 结构，包括软件包的组织方式、依赖关系以及构建系统的构成。VTJ 平台采用 PNPM 工作区和 Lerna 管理包，以 monorepo 形式组织，支持同步版本控制和共享工具。文章概述了各个软件包的功能，如基础类型、UI 组件、核心数据模型等，并阐述了运行时、设计和平台实现等关键层。此外，还介绍了开发工具和构建系统，以及如何在不同应用中使用 VTJ 软件包，最后提供了示例应用程序和源码仓库的链接。

📦 VTJ 平台采用 monorepo 结构，利用 PNPM 工作区和 Lerna 进行包管理，所有软件包都遵循同步版本控制策略，便于跨包的协调开发和发布。

🧱 平台的核心由多个软件包组成，包括基础层、运行时层、设计层和平台实现。基础层提供基础类型、实用程序和核心数据模型，运行时层负责将 DSL 模型转换为 Vue 组件，设计层提供可视化设计环境，平台实现则支持 Web、Pro 和 UniApp 等多种平台。

⚙️ 构建系统使用 Vite、Vue-tsc、Unbuild 等工具，并通过 npm 脚本编排。平台支持语义版本控制、PNPM 工作区和 Lerna 管理，构建管道实现了自动化测试和覆盖率报告。

💻 VTJ 软件包可以在不同的应用场景中使用，例如完整的 PRO 体验、Web 渲染器和 UniApp 集成。文档提供了不同应用实例，展示了 VTJ 支持的不同集成方法和平台目标。

本文档概述了 VTJ 低代码平台的 monorepo 结构、软件包依赖关系和构建系统组织。它概述了包的组织方式、它们之间的关系以及编排开发和部署的构建系统。有关核心架构组件的信息，请参阅核心架构 。

Monorepo 结构概述

VTJ 平台使用 PNPM 工作区和 Lerna 进行包管理，以 monorepo 的形式进行组织。存储库包含组织为逻辑层的包，其工作区依赖项通过 workspace：~ 引用进行管理。monorepo 结构支持跨所有软件包的同步版本控制、共享工具和协调发布。

软件包描述和用途

VTJ 平台由以下主要软件包组成：

包	版本	描述	依赖
@vtj/base	0.12.40	基础类型和实用程序	reflect-metadata， 加密-js， dayjs， lodash-es
@vtj/utils	0.12.40	常用实用程序函数和帮助程序	@vtj/base、axios、js-cookie
@vtj/core	0.12.40	核心数据模型和引擎抽象	@vtj/base
@vtj/icons	0.12.40	平台的图标组件	@element-plus/icons-vue
@vtj/ui	0.12.40	UI 组件库	@vtj/icons、@vtj/utils、element-plus、sortablejs、vxe 表
@vtj/materials	0.12.40	设计师的组件材料	@vtj/core、@vtj/ui、@vtj/utils、element-plus、ant-design-vue、vant
@vtj/charts	0.12.40	用于数据可视化的图表组件	@vtj/icons、@vtj/utils、echarts
@vtj/renderer	0.12.40	低代码 DSL 的运行时渲染器	@vtj/core、@vtj/utils
@vtj/parser	0.12.40	将 Vue 代码解析为 DSL 模型	@vtj/base、@vtj/core、@babel/parser、@vue/compiler-sfc
@vtj/coder	0.12.40	从 DSL 模型生成 Vue 代码	@vtj/base， @vtj/core， 更漂亮
@vtj/designer	0.12.40	可视化设计环境	@vtj/核心、@vtj/渲染器、@vtj/UI、monaco-editor
@vtj/local	0.12.40	本地开发服务	@vtj/编码器、@vtj/核心、@vtj/节点、@vtj/解析器
@vtj/pro	0.12.40	带 IDE 的专业平台	@vtj/核心、@vtj/designer、@vtj/本地、@vtj/materials、@vtj/renderer
@vtj/web	0.12.40	Web 平台实施	@vtj/图表、@vtj/核心、@vtj/渲染器、@vtj/UI
@vtj/uni	0.12.40	UniApp 支持包	@vtj/core、@vtj/renderer、@vtj/utils
@vtj/uni-app	0.12.40	UniApp 平台实现	@vtj/核心、@vtj/渲染器、@vtj/uni
@vtj/cli	0.12.4	构建和开发工具	vite、vue-tsc、@vitejs/plugin-vue、rollup 插件
@vtj/node	0.12.40	Node.js 实用程序	@vtj/基础、FS-extra、AXIOS

包依赖项和关系

基础层：Core、Base 和 Utils

基础层为整个平台提供了必要的构建块。

@vtj/base

基础包提供基本实用程序、类型和帮助程序函数。它包含：

类型定义常用接口加密实用程序使用 dayjs 进行日期格式化Lodash 实用程序扩展

@vtj/utils

utils 包基于 base 构建，并提供更专业的 Utility 函数：

基于 axios 的 HTTP 请求实用程序Cookie 管理浏览器存储抽象常见的帮助程序函数路径匹配实用程序

@vtj/core

核心包定义了低代码平台的主要数据模型和抽象：

项目模型块模型节点模型状态管理事件处理数据绑定

此包是系统的概念核心，它定义了为低代码体验提供支持的域特定语言 （DSL）。

运行时层：Renderer、Parser 和 Coder

@vtj/renderer

renderer 包负责：

在运行时将 DSL 模型转换为 Vue 组件管理组件 state 和 props处理事件和数据流支持动态插槽渲染为组件通信提供上下文

@vtj/parser

parser 包提供：

将 Vue SFC 文件转换为 DSL 模型使用 Babel 进行 AST 遍历和分析CSS 解析和提取使用 Vue 编译器解析模板

@vtj/coder

coder 包处理：

从 DSL 模型生成 Vue 源代码使用 Prettier 进行格式化模板生成脚本和样式生成

设计层：Designer 和本地服务

设计层提供可视化设计环境和本地开发能力。

@vtj/designer

Designer 包包含：

画布和属性面板组件组件拖放功能使用 Monaco Editor 的代码编辑器组件树导航预览模拟AI 辅助集成

@vtj/local

本地服务包提供：

本地文件系统集成项目加载和保存将代码生成到文件本地开发服务器集成文件上传处理

平台实施

VTJ 通过专用软件包支持多个平台目标：

@vtj/web

Web 包提供标准的 Web 实现，包括：

特定于 Web 的组件与 Element Plus 集成图表集成Web 运行时支持

@vtj/pro

pro 包是完整的 IDE 体验，结合了：

设计师本地服务材料运行时渲染器平台集成

@vtj/uni 和 @vtj/uni-app

这些 packages 为 UniApp 开发提供支持：

UniApp 组件映射H5 和小程序支持UniApp 专用渲染与 UniApp 框架集成

开发工具

@vtj/cli

CLI 软件包提供开发和构建工具：

项目脚手架构建配置开发服务器测试实用程序插件支持

@vtj/node

点包提供：

文件系统实用程序用于服务器端作的 HTTP 实用程序配置管理项目模板处理

Monorepo 管理和构建系统

工作区配置

VTJ monorepo 使用带有 Lerna 的 PNPM 工作区进行包管理。工作区配置在 pnpm-lock.yaml 中定义，并使用 workspace：~ 说明符通过工作区依赖项进行管理。

PNPM 工作区结构：

包版本控制策略

所有 VTJ 软件包都遵循同步版本控制策略。大多数软件包的当前版本为 0.12.40，CLI 版本为 0.12.4。此同步通过根 package.json 中定义的 Lerna 命令进行管理。

版本管理命令：

lerna version patch --yes - 修补程序版本更新lerna version minor --yes - 次要版本更新lerna version prerelease --yes - 预发行版本pnpm -r publish --access public - 同步发布

构建系统架构

构建系统使用通过 npm 脚本编排的工具组合：

构建工具：

Vite - 软件包的主要构建工具Vue-tsc - Vue 组件的 TypeScript 编译Unbuild - Node.js 包的统一构建系统Rollup - 使用插件捆绑模块Terser - JavaScript 缩小Sass - CSS 预处理

构建编排：

该平台使用：

具有同步版本的语义版本控制使用 PNPM 工作区和 Lerna 进行 Monorepo 管理跨所有包的协调构建管道自动化测试和覆盖率报告

在应用程序中使用包

应用程序可以通过多种方式使用 VTJ 软件包：

使用完整的 PRO 体验：

import { createApp } from 'vue';import { VtjPro } from '@vtj/pro';const app = createApp(App);app.use(VtjPro);

仅使用 Web 渲染器：

import { createApp } from 'vue';import { VtjWeb } from '@vtj/web';const app = createApp(App);app.use(VtjWeb);

使用 UniApp 集成：

import { createSSRApp } from 'vue';import { VtjUniApp } from '@vtj/uni-app';export function createApp() {  const app = createSSRApp(App);  app.use(VtjUniApp);  return { app };}

应用实例

该存储库包含几个示例应用程序：

应用程序	描述	使用的软件包
应用程序	标准 Web 应用程序	@vtj/web、@vtj/plugin-ckeditor
优尼 APP	UniApp 实施	@vtj/uni-app、@vtj/renderer
H5 系列	移动 H5 应用程序 @vtj/h5、@vtj/renderer
外延	浏览器扩展	@vtj/pro、@vtj/Web
材料	材质编辑器	@vtj/pro、@vtj/Web
插件	插件开发	@vtj/pro、@vtj/Web
LCDP 系列	在线演示	@vtj/pro、@vtj/pro

这些示例展示了 VTJ 支持的不同集成方法和平台目标。

源码仓库

gitee.com/newgateway/…