AI 驱动的 Vue3 应用开发平台 深入探究（一）：架构概览

架构概览

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

核心架构层

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

flowchart TD
    subgraph "Design Environment (@vtj/pro, @vtj/designer)"
        Engine["Engine<br>designer/src/engine/Engine.ts<br>orchestrate()"]
        Widgets["Widget System<br>builtInWidgets<br>Apps/Workspace/Settings"]
        Canvas["Design Canvas<br>Designer.allowDrop()"]
        Simulator["Simulator<br>iframe with Provider"]
    end

    subgraph "State Layer (@vtj/core)"
        ProjectModel["ProjectModel<br>core/src/models/project.ts<br>EventEmitter<br>EVENT_PROJECT_CHANGE"]
        BlockModel["BlockModel<br>core/src/models/block.ts<br>BlockSchema"]
    end

    subgraph "AI Integration (@vtj/designer)"
        AIAgent["AI Agent<br>hooks/useAI.ts<br>createTopic()"]
        ToolRegistry["Tool Registry<br>40+ tools<br>execute()"]
        CodeUpdater["CodeIncrementalUpdater<br>parseOutput()"]
    end

    subgraph "Code Transformation"
        Parser["@vtj/parser<br>parseVue()<br>parseSFC()"]
        Coder["@vtj/coder<br>generator()<br>tsFormatter()"]
    end

    subgraph "Services (@vtj/local)"
        LocalService["LocalService<br>local/src/service.ts"]
        JsonRepo["JsonRepository<br>.vtj/projects/"]
        VueRepo["VueRepository<br>.vtj/vue/"]
    end

    Engine --> ProjectModel
    Engine --> Widgets
    Engine --> Canvas
    Engine --> Simulator
    Engine --> AIAgent
    ProjectModel --> BlockModel
    AIAgent --> ToolRegistry
    AIAgent --> CodeUpdater
    CodeUpdater --> Parser
    BlockModel --> Parser
    BlockModel --> Coder
    Parser --> LocalService
    Coder --> LocalService
    LocalService --> JsonRepo
    LocalService --> VueRepo

包生态系统

平台的模块化是通过精心设计的 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 最佳实践，并且可读且可维护。