AI + 低代码技术揭秘（一）：概述

VTJ.PRO 是一个 AI 驱动的 Vue3 低代码开发平台，支持 Vue 单文件组件 （SFC） 和领域特定语言 （DSL） 表示之间的双向转换。VTJ 构建在具有同步版本控制的 monorepo 架构之上，为可视化设计、代码生成和多平台部署提供了一个全面的软件包生态系统，同时保持与现有 Vue 3 开发工作流程的兼容性。

目的和范围

本文档简要概述了 VTJ 低代码平台，包括其架构、关键组件和设计理念。有关特定组件（如 Engine 和 Provider 系统）的详细信息，请参阅核心架构 ，或者有关工程和块模型的详细信息，请参阅工程和块模型 。

主要特点

• 双向代码流 ：在视觉设计和 Vue 源代码之间无缝转换
• AI 集成 ：智能代码生成、优化和图像到代码转换功能
• Vue 3 基础 ：建立在最新的 Vue 生态系统之上，支持 TypeScript 和 Vite
• 多平台支持 ：面向 Web 应用程序、移动应用程序和 UniApp（跨平台）项目
• 低学习曲线 ：专为 Vue 开发人员设计，需要最少的额外知识
• 非侵入式实施 ：与现有项目集成，无代码污染

系统架构概述

VTJ 遵循模块化架构，在多个软件包中明确分离关注点，从基础到平台特定的实现，按层组织。

Monorepo 包架构

项目脚手架系统

AI 增强的设计时到运行时流程

VTJ 的核心创新是 Vue SFC 和低代码 DSL 之间的双向转换，并通过 AI 功能进行了增强：

双向代码管道

数据结构流

AI 驱动的开发功能

VTJ 将 AI 功能集成到整个开发管道中，重点是图像到代码的生成和智能辅助：

AI 集成架构

开始

VTJ 提供了几种开始使用该平台的方法：

使用 create-vtj 创建项目

create-vtj 脚手架工具使用预配置的构建系统生成特定于平台的项目：

shell

# Web applications (PC) - uses @vtj/web platform
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t app
# Mobile H5 applications - uses @vtj/h5 platform
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t h5
# Cross-platform apps - uses @vtj/uni-app platform
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t uniapp
# Component development - uses @vtj/materials
npm create vtj@latest --registry=https://registry.npmmirror.com -- -t material

开发环境设置

对于 VTJ 本身的本地开发：

shell

git clone https://gitee.com/newgateway/vtj.git
cd vtj
npm run setup && npm run build && npm run app:dev

与现有项目集成

VTJ 通过特定于平台的软件包与现有的 Vue 3 项目无缝集成。有关详细的集成模式，请参阅 集成指南

多平台部署架构

VTJ 通过专门的平台包支持多个部署目标，每个平台包都针对特定环境进行了优化：

平台架构

当前版本

VTJ 的当前版本是 0.12.40，在 monorepo 中的所有软件包之间同步。

结论

VTJ.PRO 是专为 Vue 3 开发人员设计的综合性低代码平台。通过实现视觉设计和 Vue 源代码之间的双向转换，它可以加速开发，同时保持直接代码访问的灵活性和强大功能。该平台的模块化架构、AI 集成和多平台支持使其适用于广泛的应用程序开发场景。

源码仓库

https://gitee.com/newgateway/vtj