# VTJ-RuoYi-Vue3

**Repository Path**: newgateway/VTJ-RuoYi-Vue3

## Basic Information

- **Project Name**: VTJ-RuoYi-Vue3
- **Description**: VTJ.PRO 与若依（RuoYi）深度集成，融合双向代码穿梭、AI智能引擎及多模态渲染技术，打造“设计即生产”新体验。支持可视化开发、AI生成代码、旧组件重构，提升企业开发效率，助力数字化转型。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://vtj.pro/
- **GVP Project**: No

## Statistics

- **Stars**: 23
- **Forks**: 7
- **Created**: 2025-07-17
- **Last Updated**: 2025-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: AI, 低代码, ruoyi, VTJ

## README

# VTJ 集成 RuoYi-Vue3 示例项目

本项目是一个**开箱即用**的示例，展示了如何将 **VTJ 低代码开发平台**无缝集成到 **RuoYi-Vue3** 后台管理系统中。通过此集成，开发者可以充分利用 VTJ 强大的低代码能力，结合 RuoYi-Vue3 完善的后台管理功能，实现**高效、智能**的业务系统开发。

![](./docs/index.png)

## 🚀 快速开始

1.  **克隆项目**:
    ```bash
    git clone https://gitee.com/newgateway/VTJ-RuoYi-Vue3.git
    cd VTJ-RuoYi-Vue3
    ```
2.  **安装依赖**:
    ```bash
    npm install
    ```
3.  **运行项目**:

    ```bash
    npm run dev
    ```

    项目将在本地开发服务器上运行，通常是 `http://localhost:3000`。

4.  **访问设计器**:
    在开发模式下，点击页面右下角的 VTJ 图标即可打开低代码设计器。

## RuoYi-Vue3 源项目

RuoYi-Vue3 源仓库: https://gitcode.com/yangzongzhuan/RuoYi-Vue3

## 集成改动内容

### 1. `package.json`

为了实现 VTJ 与 RuoYi-Vue3 的无缝集成，我们在 `package.json` 中进行了以下关键调整：

- **新增 VTJ 核心依赖**: 引入 `@vtj/web` (VTJ 渲染器核心库) 和 `@vtj/cli`、`@vtj/pro` (VTJ 开发工具链) 作为项目依赖。
- **优化依赖冲突**: 删除了源仓库中与 `@vtj` 内置功能重复的依赖，包括 `vite`、`@vitejs/plugin-vue`、`@vueuse/core`、`axios`、`echarts`、`element-plus`。此举旨在避免潜在的依赖冲突，并利用 VTJ 提供的优化版本，确保项目稳定性和减小打包体积。
- **VTJ 配置**: 增加了 `vtj` 配置项，用于指定 VTJ 相关的行为，例如路由历史模式 (`history`) 和是否显示遮罩 (`noMask`)。

```json
{
  "dependencies": {
    "@vtj/web": "latest"
  },
  "devDependencies": {
    "@vtj/cli": "latest",
    "@vtj/pro": "latest"
  },
  "vtj": {
    "history": "web",
    "noMask": "true"
  }
}
```

### 2. `vite.config.js`

在 `vite.config.js` 中，我们引入并配置了 VTJ 开发插件 `createDevTools`。这个插件的作用是将 VTJ 低代码开发工具集成到 Vite 构建流程中，从而在开发环境下提供设计器界面。`linkOptions` 配置项指定了设计器页面的访问路径。

```js
import { createDevTools } from "@vtj/pro/vite";

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [

      // VTJ低代码开发工具
      createDevTools({ linkOptions: { href: "/__vtj__/#/" } }),
    ]

});

```

### 3. `/src/modules.js`

新增了 `/src/modules.js` 文件。这个文件是 VTJ 动态加载低代码产物的关键。它通过 `import.meta.glob` 机制，自动引入 `.vtj/projects` 目录下的低代码项目文件和 `.vtj/files` 目录下的低代码页面文件，确保 VTJ 渲染器能够识别并渲染这些动态生成的模块。

```js
export function createModules() {
  return import.meta.glob(["/.vtj/projects/*.json", "/.vtj/files/*.json"]);
}
```

### 4. `/src/App.vue`

为了支持 VTJ 渲染器对异步组件和动态低代码页面的加载，我们在 `src/App.vue` 中使用 `Suspense` 组件包裹了 `router-view`。这确保了在低代码页面加载完成前，应用能够优雅地处理等待状态，提升用户体验。

```html
<template>
  <Suspense>
    <router-view />
  </Suspense>
</template>
```

### 5. `/src/main.js`

`src/main.js` 是应用的入口文件，我们对其进行了核心改造，以引入 VTJ 渲染器并接管部分应用初始化流程：

- **引入 VTJ 渲染器**: 导入 `createProvider`, `LocalService`, `ContextMode` 等 VTJ 渲染器核心模块。
- **创建 VTJ Provider**: 通过 `createProvider` 函数创建 VTJ 渲染器实例。
  - `materialPath`: 指定物料路径。
  - `nodeEnv`: 设置运行环境，通常与 `process.env.NODE_ENV` 保持一致。
  - `mode`: 设置上下文模式为 `Runtime`，表示在运行时进行渲染。
  - `modules`: 通过 `createModules()` 动态注册低代码产物模块。
  - `service`: 注入 `LocalService` 实例，用于开发环境的本地服务。
  - `router`: 注入 Vue Router 实例，使 VTJ 能够管理路由。
  - `dependencies`: 声明 VTJ 渲染时所需的外部依赖，如 Vue、Vue Router、Element Plus，并以异步导入的方式提供，确保按需加载。
  - `project.id`: 设置项目 ID，需要与 `package.json` 中的 `name` 字段匹配，用于 VTJ 识别当前项目。
  - `routeAppendTo`: 指定低代码生成的页面路由将挂载到 RuoYi-Vue3 现有路由的 `Pages` 路由下。
- **应用初始化**: `onReady` 回调确保在 VTJ 渲染器准备就绪后，才执行原有的 RuoYi-Vue3 应用初始化逻辑，并将 VTJ `provider` 挂载到 Vue 应用实例上，最后挂载到 `#app` 元素。

```js
// 引入VTJ 渲染器
import { createProvider, LocalService, ContextMode } from "@vtj/renderer";
// 引入低代码产物
import { createModules } from "./modules";
const app = createApp(App);

// 开发环境本地服务
const service = new LocalService();
const { provider, onReady } = createProvider({
  materialPath: "/",
  // 设置运行环境
  nodeEnv: process.env.NODE_ENV,
  mode: ContextMode.Runtime,
  // 注册应用模块
  modules: createModules(),
  // 注入服务实例
  service,
  // 注入路由实例
  router,
  dependencies: {
    Vue: () => import("vue"),
    VueRouter: () => import("vue-router"),
    ElementPlus: () => import("element-plus"),
  },
  project: {
    // 需要和 package.json 文件的 name 字段匹配
    id: "ruoyi",
  },
  routeAppendTo: "Pages",
  enableStaticRoute: true,
});

onReady(async () => {
  /** 原有的初始化代码放到这里 */

  app.use(provider);
  app.mount("#app");
});
```

### 6. `/src/router/index.js`

在 `src/router/index.js` 中，我们对路由配置进行了调整，新增了一个名为 `Pages` 的公共路由。这个路由专门用于承载 VTJ 低代码平台生成的页面。通过这种方式，VTJ 动态生成的页面能够无缝地集成到 RuoYi-Vue3 的现有路由体系中，确保导航和访问的连贯性。

```js
// 公共路由
export const constantRoutes = [
  {
    path: "/",
    component: Layout,
    name: "Pages",
  },
  // 原有内容
];
```

增加路由守卫，处理路由冲突问题

```js
router.beforeEach((to, from, next) => {
  if (to.path.startsWith("/vtj/")) {
    next(to.fullPath.replace("/vtj/", "/page/"));
  } else {
    next();
  }
});
```

## 🎨 设计器入口

完成上述集成改动并运行 `npm run dev` 启动项目后，您可以通过以下方式访问 VTJ 低代码设计器：

- **点击页面右下角的 VTJ 图标**: 在开发模式下，页面右下角会显示一个 VTJ 图标，点击即可打开设计器界面。
- **直接访问**: 在浏览器中访问 `http://localhost:3000/__vtj__/#/` (假设您的开发服务器运行在 `http://localhost:3000`)。

![](./docs/1.png)

![](./docs/4.png)

**重要提示**：VTJ 低代码设计器仅在**开发环境**下可用。项目编译部署后，生产环境中将不包含设计器功能，确保生产环境的轻量和安全。

## 若依菜单管理

VTJ 生成页面可以在若依的菜单管理添加，添加的菜单路由地址格式为：`vtj/页面ID`

![](./docs/9.png)

## ✨ 集成效果

VTJ 平台集成了多项 AI 驱动的低代码能力，极大地提升了开发效率和创新空间：

### AI 文生代码页面 (Text-to-Code)

通过自然语言描述您的页面需求，VTJ 的 AI 引擎能够智能理解并自动生成相应的页面代码，将您的想法迅速转化为可运行的界面。

![文生代码页面](./docs/2.png)
![](./docs/5.png)

### AI 图生代码页面 (Image-to-Code)

上传设计稿图片（如 JPG, PNG 等），AI 能够智能识别图片中的布局、组件和样式，并将其还原为高质量的 Vue 页面代码，实现设计稿到代码的快速转换。

![图生代码页面](./docs/3.png)

![](./docs/6.png)

### AI 设计稿转页面 (Design-to-Page)

VTJ 支持直接导入主流设计工具（如 Figma, Sketch, MasterGo）的设计稿文件。AI 能够解析设计稿的结构和元素，并自动生成可编辑的低代码页面，极大缩短了设计与开发之间的鸿沟。

![](./docs/7.png)

![](./docs/8.png)

## 📚 VTJ 相关资源

**VTJ.PRO** 是一个强大的 **AI 驱动的 Vue3 低代码开发平台**。它内置了先进的低代码引擎、高性能渲染器和智能代码生成器，能够实现 Vue 源码与低代码 DSL (领域特定语言) 的双向智能转换。VTJ 专为前端开发者量身打造，提供开箱即用的体验，并能无缝融入现有工程，实现零侵入的开发流程与编码习惯，极大提升开发效率和项目质量。

- **官网文档**: 详细介绍了 VTJ 的各项功能、使用方法和最佳实践。
  [https://vtj.pro/](https://vtj.pro/)
- **源码仓库**: 访问 VTJ 的开源代码，了解其内部实现和贡献社区。
  [https://gitee.com/newgateway/vtj](https://gitee.com/newgateway/vtj)
- **在线开发平台**: 无需本地部署，直接在线体验 VTJ 的强大功能。
  [https://lcdp.vtj.pro](https://lcdp.vtj.pro)

## 📂 项目结构

本项目基于 RuoYi-Vue3 框架，并集成了 VTJ 低代码平台。以下是项目的主要目录结构及其简要说明：

```
.
├── public/                 # 静态资源文件
├── src/                    # 核心源代码目录
│   ├── api/                # API 接口定义
│   ├── assets/             # 静态资源 (图片、样式、字体等)
│   ├── components/         # 可复用 Vue 组件
│   ├── directive/          # Vue 自定义指令
│   ├── layout/             # 页面布局组件
│   ├── plugins/            # Vue 插件
│   ├── router/             # Vue Router 路由配置
│   ├── store/              # Vuex 状态管理模块
│   ├── utils/              # 工具函数
│   ├── views/              # 页面视图组件
│   ├── App.vue             # 应用根组件 (VTJ 集成点)
│   ├── main.js             # 应用入口文件 (VTJ 集成点)
│   └── modules.js          # VTJ 低代码模块动态加载 (VTJ 新增)
├── vite/                   # Vite 构建配置相关
│   └── plugins/            # Vite 插件
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
├── .gitignore              # Git 忽略文件
├── index.html              # HTML 模板文件
├── package.json            # 项目依赖和脚本配置 (VTJ 集成点)
├── README.md               # 项目说明文档
└── vite.config.js          # Vite 配置文件 (VTJ 集成点)
```