架构概览

VTJ.PRO 是一个基于模块化架构构建的 AI 驱动型 Vue3 低代码开发平台，它在分离设计时和运行时环境关注点的同时，保持了可视化 DSL 与生产级 Vue 源代码之间的双向转换。该平台遵循微包架构，在 14 个 npm 包之间职责分明，使开发者能够使用完整平台或将单个模块集成到现有项目中 package.json。

核心架构层

架构由五个主要层组成，按职责和抽象级别进行组织：

包生态系统

平台的模块化是通过精心设计的 monorepo 结构实现的，使用 pnpm workspaces 和 lerna 进行多包管理 package.json。每个包都服务于特定的架构目的，可以被独立使用或扩展。

Package Purpose Key Exports Dependencies
@vtj/core 核心数据模型和事件系统 NodeModel, ProjectModel, BlockModel, HistoryModel, Emitter @vtj/base
@vtj/renderer 运行时渲染引擎 Provider, nodeRender, blockRender, Context, Services @vtj/base, @vtj/core
@vtj/designer 可视化设计界面 Engine, Simulator, WidgetManager, SetterManager @vtj/base, @vtj/core, @vtj/renderer
@vtj/parser 源代码到 DSL 解析 parseVue, parseTemplate, parseScript, parseStyle @vue/compiler-dom, @vue/compiler-sfc, @vtj/coder
@vtj/coder DSL 到代码生成 generateVue, generateTemplate, generateScript @vtj/core, prettier
@vtj/materials 组件库集成 ElementPlus, AntDV, Vant, Charts materials element-plus, ant-design-vue, vant, echarts
@vtj/cli 构建和开发工具 Build plugins, Vite configs, Type checking vite, vue-tsc, @vitejs/*
@vtj/base 共享工具和类型 Base class, logger, request, utils -
@vtj/utils 通用工具函数 camelCase, upperFirst, debounce, pick -
@vtj/node Node.js 运行时工具 file operations, path utilities -
@vtj/ui 自定义 UI 组件 Dialog, Grid, Form, Header, Menu vue, vue-router, pinia
@vtj/charts ECharts 集成 Chart, MapChart components echarts
@vtj/icons 图标系统 Icon components and registry -
@vtj/local 本地存储适配器 Local service for renderer -
@vtj/uni UniApp 平台支持 Uni-specific components and adapters @dcloudio/*

核心基础层

@vtj/core 包提供了整个平台中使用的基本数据结构和响应式模式。它定义了领域特定语言 (DSL) 模式，并实现了用于设计器和运行时环境之间状态同步的事件驱动架构 packages/core/src。

核心模型实现了一个分层节点系统：

  • NodeModel：表示具有属性、事件、指令和子项的单个 UI 组件。每个节点维护一个唯一的 ID 和父引用，以便进行树遍历 packages/core/src/models/node.ts#L35-L100。
  • BlockModel：封装了可重用的组件块，具有自己的节点树和数据源绑定 packages/core/src/models/block.ts。
  • ProjectModel：顶层容器，管理多个页面、块、数据源、依赖项和项目范围的配置 packages/core/src/models/project.ts。
  • HistoryModel：通过跟踪带有元数据的状态变化来实现撤销/重做功能 packages/core/src/models/history.ts。

事件发射器系统实现了跨包的响应式通信：

export const EVENT_NODE_CHANGE = "EVENT_NODE_CHANGE";
export const EVENT_BLOCK_CHANGE = "EVENT_BLOCK_CHANGE";
export const EVENT_PROJECT_CHANGE = "EVENT_PROJECT_CHANGE";
export const EVENT_HISTORY_CHANGE = "EVENT_HISTORY_CHANGE";

所有事件都通过集中的发射器实例分发，允许包在不直接耦合的情况下订阅更改。这种解耦使设计器和渲染器能够在共享状态的同时保持单独的执行上下文。

设计时层

@vtj/designer 包通过复杂的小部件架构实现可视化编辑环境。设计器框架由四个核心组件组成 packages/designer/src/framework：

引擎架构

Engine 类充当设计器的中央协调器，管理整个设计时环境的生命周期 packages/designer/src/framework/engine.ts#L1-L100。主要职责包括：

  • 项目管理：加载、激活和保存项目模式
  • 状态管理：通过集中的 State 实例进行响应式状态跟踪
  • Widget 系统：通过 ToolRegistry 管理设计器 widgets
  • Setter 系统：通过 SetterManager 管理属性编辑器
  • 资源管理：通过 Assets 加载材料、组件和依赖项
  • 模拟：通过 Simulator 管理预览
  • API 集成：OpenAPI 模式获取和模拟数据生成
  • 报告：错误跟踪和状态报告

Widget 和 Setter 系统

设计器使用基于插件的架构，其中 widgets 和 setters 是动态注册和实例化的：

  • Widgets：占用设计器界面特定区域的自包含 UI 组件（例如，组件树、属性面板、数据源）。Widgets 注册了元数据，并且可以针对每个项目启用/禁用 packages/designer/src/managers/widget.ts。
  • Setters：提供用于编辑节点属性（例如，颜色选择器、表达式编辑器、图标选择器）的 UI 控件的属性编辑器。Setters 按属性类型注册，并且可以针对每个材料进行自定义 packages/designer/src/managers/setter.ts。
  • Regions：渲染 widgets 的布局区域（例如，左面板、中心工作区、右面板）。Regions 实现为包装和定位 widgets 的 Vue 组件 packages/designer/src/wrappers/region.ts。

内置 Widgets

设计器包括一套全面的内置 widgets，涵盖所有基本的设计时功能：

Widget Category Widgets Purpose
Navigation Outline, NodePath Component tree navigation and breadcrumb
Properties Properties, Style Property and style editing
Actions Actions, Toolbar Toolbar and action buttons
Resources Components, Blocks, Templates Component and template libraries
Data DataSources, Apis Data source and API management
Preview Previewer, Preview Live preview and simulation
Config Designer, UniConfig, Globals Designer and global configuration
History History Undo/redo history panel
Devtools Devtools, Hotkeys Developer tools and keyboard shortcuts
AI AI AI-powered component generation
Marketing Market, Docs Component marketplace and documentation
Project Pages, ProjectConfig Page and project management

运行时层

@vtj/renderer 包实现了生产运行时环境，将 DSL 模式渲染到 Vue 应用程序中。渲染器遵循基于提供者的架构，将配置与渲染逻辑分离 packages/renderer/src/provider/provider.ts#L1-L100。

Provider 系统

Provider 类是中央运行时协调器，管理：

  • 项目模式：加载和缓存项目配置
  • 组件加载：动态导入材料和依赖项
  • 服务集成：连接到后端服务以获取数据
  • 路由管理：从页面模式生成 Vue Router 路由
  • I18n 支持：国际化配置
  • 全局状态：运行时全局变量和函数
  • 上下文模式：区分设计时和运行时执行

Provider 支持多种上下文模式：

export enum ContextMode {
  Design = "design", // Designer preview mode
  Runtime = "runtime", // Production runtime mode
  Preview = "preview", // Isolated preview mode
}

节点渲染引擎

渲染器实现了一个递归节点渲染算法，将 DSL 节点模式转换为 Vue VNodes packages/renderer/src/render/node.ts#L1-L100。主要功能包括：

  • 组件解析：从注册表、Vue 应用上下文中查找组件，或返回原生 HTML 标签
  • 指令处理：处理 Vue 指令（v-if、v-for、v-show、v-model、v-bind、v-html 等）
  • 表达式解析：使用上下文将 JSExpression 字符串转换为计算值
  • 事件绑定：将事件处理程序附加到组件事件
  • 插槽渲染：处理命名插槽和默认插槽
  • Block 加载：动态加载和渲染 block 模式

渲染上下文为表达式提供执行环境：

interface Context {
  $data: Record<string, any>; // Data source bindings
  $props: Record<string, any>; // Component props
  $emit: Function; // Event emitter
  $components: Record<string, any>; // Component registry
  __parseExpression: Function; // Expression evaluator
}

Block 渲染

Blocks 是可重用的组件模板，通过 BlockLoader 系统进行渲染。当节点引用 block 时，加载器获取 block 模式，将其与当前上下文合并，并递归渲染其内容。这实现了组件级别的可重用性，同时保持了单个实例的隔离。

服务架构

渲染器支持多种服务实现，用于不同的运行时场景：

Service Use Case Implementation
MemoryService In-memory data storage for previews @vtj/renderer/src/services/memory.ts
LocalService Local storage for persisted data @vtj/renderer/src/services/local.ts
StorageService Custom storage adapters @vtj/renderer/src/services/storage.ts

服务实现一个通用接口，其中包含用于读/写页面、块和项目模式的方法。

双向转换层

平台的独特能力在于 DSL 模式和 Vue 源代码之间的双向转换，这是通过两个互补的包实现的：

Parser (@vtj/parser)

解析器使用 Babel 和 Vue 编译器内部机制将 Vue SFC（单文件组件）源代码转换为 DSL 模式 packages/parser/src。它处理：

  • 模板解析：使用 @vue/compiler-dom 将 Vue 模板转换为节点树
  • 脚本解析：使用 Babel AST 提取组件 setup、props、emits 和状态
  • 样式解析：使用 PostCSS 处理 SCSS、CSS 和作用域样式
  • UniApp 解析：专门处理 uni-app 特定语法和组件

关键解析器函数：

// Main entry point for parsing Vue SFCs
export async function parseVue(code: string): Promise<NodeSchema>;

// Template-specific parsing
export function parseTemplate(template: string): NodeSchema;

// Script-specific parsing
export function parseScript(script: string): ScriptSchema;

// Style-specific parsing
export function parseStyle(style: string): StyleSchema;

Coder (@vtj/coder)

Coder 执行反向转换，将 DSL 模式转换为生产就绪的 Vue 代码 packages/coder/src。它包括：

  • 代码生成：从模式创建 Vue SFC 模板、脚本和样式
  • Prettier 格式化：确保生成的文件具有一致的代码风格
  • 模板编译：从节点树生成模板语法
  • 脚本编译：生成具有正确导入和导出的 setup 脚本
  • 样式编译：生成作用域和非作用域样式

关键 coder 函数：

// Main entry point for generating Vue code
export async function generateVue(schema: ProjectSchema): Promise<string>;

// Template generation
export function generateTemplate(nodes: NodeSchema[]): string;

// Script generation
export function generateScript(schema: ProjectSchema): string;

// Style generation
export function generateStyle(schema: ProjectSchema): string;

材料系统

@vtj/materials 包为主要 Vue UI 框架提供预构建的组件库集成 packages/materials/package.json#L1-L73。每个材料包包括：

  • 组件模式：定义组件属性、事件和行为的描述符
  • Setters：用于组件特定配置的自定义属性编辑器
  • 示例：显示组件使用模式的演示配置
  • 文档：用于设计器集成的结构化文档

支持的组件库

Library Package Components Platform
Element Plus element-plus 80+ components Web
Ant Design Vue ant-design-vue 70+ components Web
Vant vant 50+ components H5 Mobile
ECharts echarts Charts, MapChart All platforms
@vtj/ui @vtj/ui 20+ custom components All platforms
UniApp Components @dcloudio/* uni-app components UniApp
Uni UI @dcloudio/uni-ui 30+ components UniApp H5

材料模式结构

每个材料组件都使用包含以下内容的模式进行定义：

interface MaterialSchema {
  name: string; // Component name
  title: string; // Display title
  category: string; // Category for organization
  icon?: string; // Icon for visual representation
  description?: string; // Component description
  props: PropSchema[]; // Property definitions
  events?: EventSchema[]; // Event definitions
  directives?: DirectiveSchema[]; // Directive definitions
  snippets?: SnippetSchema[]; // Code snippets/templates
  block?: BlockSchema; // Default block template
  dependencies?: string[]; // Required dependencies
  setter?: string; // Custom setter
}

项目模板和应用程序

平台通过 create-vtj CLI 工具提供多个应用程序模板 create-vtj/src/index.ts#L1-L77。模板位于 templates/ 目录中，用于搭建完整的项目结构：

可用模板

Template Command Use Case Platform
app -t app Web application Web
h5 -t h5 Mobile H5 application H5
uniapp -t uniapp Cross-platform application UniApp
material -t material Material library development All
plugin -t plugin Designer plugin development All
extension -t extension Browser extension Extension
library -t library Component library All

项目结构

每个生成的项目都遵循标准化的结构：

vtj-project/
├── src/
│   ├── main.ts              │   ├── App.vue              # Root component
│   ├── vtj/                 # VTJ-generated code
│   │   ├── pages/           # Generated pages
│   │   ├── blocks/          # Generated blocks
│   │   └── schemas/         # DSL schemas
│   └── designer/            # Designer integration
├── public/                  # Static assets
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies

vtj/ 目录包含应提交到版本控制的生成代码，而 designer/ 目录包含可从生产版本中排除的设计器特定代码。

开发工具

@vtj/cli 包提供全面的开发工具，包括构建插件、类型检查和测试基础设施 packages/cli/package.json#L1-L90。主要功能包括：

构建工具

  • Vite 插件：用于 Vue SFC 编译、DSL 处理和代码生成的自定义插件
  • 类型检查：集成 vue-tsc 进行 TypeScript 验证
  • 旧版支持：@vitejs/plugin-legacy 用于浏览器兼容性
  • CDN 集成：vite-plugin-cdn-import 用于外部库加载
  • CSS 处理：Sass 集成和作用域样式编译

开发工作流

根 package.json 为所有包的开发提供了统一的脚本 package.json：

# Development
npm run dev              # Start development server
npm run dev:uni          # Start UniApp development server

# Building
npm run build            # Build all packages
npm run dev:build        # Build development environment

# Testing
npm run test             # Run all tests
npm run coverage         # Generate coverage reports

# Package-specific operations
npm run cli:build        # Build CLI package
npm run core:build       # Build Core package
npm run designer:build   # Build Designer package
npm run renderer:build   # Build Renderer package

集成模式

VTJ 支持多种集成模式，具体取决于使用情况：

全平台集成

使用完整的 VTJ.PRO 平台 进行具有 AI 功能的可视化开发。这提供了：

  • 包含所有 widgets 的完整设计器界面
  • 代码生成和双向转换
  • 材料市场
  • AI 驱动的组件生成
  • 协作功能

仅设计器集成

将 @vtj/designer 导入到现有的 Vue 项目中以添加可视化编辑功能：

import { Engine } from "@vtj/designer";

const engine = new Engine({
  container: document.getElementById("designer"),
  service: myService,
  project: myProjectSchema,
});

仅运行时集成

导入 @vtj/renderer 以在生产应用程序中渲染 DSL 模式，而无需设计时依赖项：

import { Provider } from "@vtj/renderer";

const provider = new Provider({
  service: myService,
  project: myProjectSchema,
  mode: ContextMode.Runtime,
});

材料开发

使用 @vtj/materials 脚手架创建自定义组件库：

npm create vtj@latest -t material

架构原则

VTJ 的架构遵循几个关键的设计原则：

关注点分离

设计时和运行时环境之间的清晰分离使每一层都能独立优化和部署。设计器可以在开发环境中运行，而渲染器在生产环境中运行，并通过共享的 DSL 模式进行双向同步。

可扩展性

Widget、setter 和材料注册系统允许在不修改核心包的情况下进行无限自定义。开发者可以通过声明式注册 API 创建自定义 widgets、属性编辑器和组件集成。

类型安全

所有包中完整的 TypeScript 覆盖确保了从 DSL 模式到生成代码的类型安全。类型定义从每个包中导出，以便在外部项目中使用。

性能

渲染器使用 Vue 的原生渲染系统以获得最佳性能，并且 DSL 处理的开销最小。设计器使用虚拟渲染和延迟加载来高效处理大型项目。

开发者体验

平台在整个过程中都遵循 Vue 开发者约定，确保熟悉 Vue 的开发者无需学习新范式即可使用 VTJ。生成的代码遵循 Vue 最佳实践，并且可读且可维护。

参考资料

# 架构 # 重构 # vue.js # 人工智能 # 低代码
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

3.27-28 上海集结！新榜内容节，赴一场 AI 时代的内容创作盛宴

avatar AtomGit开源社区

AI驱动的产品设计文档规范:designdoc

在AI编程中，代码逻辑的严密性严重的依赖于设计文档的质量。因此规范性的设计文档对于AI编程来说变的必不可少了。为了帮助产品经理、架构师、研发人员有效的通过AI来编写、维护、追踪可靠的设计文档。特定设计了这个专用于辅助维护设计文档的技能。

avatar AtomGit开源社区
cover

07Fly旅行社门店客户管理系统介绍

avatar AtomGit开源社区