手动集成

本教程将引导你逐步手动启动芋道项目并集成低代码模块；若你已有项目且仅需集成低代码模块，可直接跳转至第三步。相关版本对应关系请参考 版本关系。

后端需 JDK 17+（推荐使用 GraalVM 以支持内置的 GraalJS），前端需 Node.js 18+ 和 pnpm 10+（强制使用 pnpm）。

视频教程

TBD

第一步：下载并启动 ruoyi-vue-pro 项目

启动需要依赖 Mysql 和 Redis 服务，请自行准备， 这里不在赘述。

下载 ruoyi-vue-pro 源码

git clone https://gitee.com/zhijiantianya/ruoyi-vue-pro.git lowcode-ruoyi-vue-pro

切换到 lowcode-ruoyi-vue-pro 目录

cd lowcode-ruoyi-vue-pro

从指定版本检出 lowcode/master 分支。对应版本参考 版本关系

git checkout -b lowcode/master v2025.10\(jdk17/21\)

使用 Eclipse 或 IntelliJ IDEA 打开项目文件并等待依赖加载完成, 以 IntelliJ IDEA 为例

创建数据库

create database `ruoyi-vue-pro` charset utf8mb4;

执行初始化 sql 文件

执行项目目录下 sql 文件夹中 mysql 文件夹的两个 sql 文件， 初始化数据

修改 yudao-server 模块下 application-local.yaml 文件中 Mysql 和 Redis 配置信息

启动项目

启动成功控制台输出如下：

第二步：下载并启动 yudao-module-lowcode 项目

下载 yudao-module-lowcode 源码

nodejs > 16.18.0 && pnpm > 8.6.0 (强制使用pnpm)

git clone https://gitee.com/yudaocode/yudao-ui-admin-vue3.git lowcode-yudao-ui-admin-vue3

切换到 lowcode-yudao-ui-admin-vue3 目录

cd lowcode-yudao-ui-admin-vue3

从指定版本检出 lowcode/master 分支。对应版本参考 版本关系

git checkout -b lowcode/master v2025.10

使用 pnpm 安装前端依赖

pnpm install

pnpm install --registry https://registry.npmmirror.com

启动项目

前端项目会访问 ruoyi-vue-pro 后端服务，请保持 ruoyi-vue-pro 为启动状态

启动成功后会自动打开登录页面，直接登录即可

登录成功

第三步：下载 lowcode-module 代码

git clone https://gitee.com/yjy8749/lowcode-module.git

lowcode-module 中包含前端和后端两部分代码， 分别复制文件夹中代码到对应工程里即可

第四步：配置 芋道-低代码 后端工程

根目录 pom.xml 引入 yudao-module-lowcode 模块

<module>yudao-module-lowcode</module>

yudao-server模块 pom.xml 引入 yudao-module-lowcode 模块

<!-- 低代码相关模块。默认注释，保证编译速度 -->
<dependency>
  <groupId>cn.iocoder.boot</groupId>
  <artifactId>yudao-module-lowcode</artifactId>
  <version>${revision}</version>
</dependency>

修改 yudao-server 模块 application.yaml 文件，放行低代码模块接口登录校验

- /admin-api/lowcode/integrator-editor/entry/** # 低代码 集成器 入口，不需要登录，集成器根据配置验证
- /admin-api/lowcode/deploy-api/** # 低代码 管理后台 部署接口，不需要登录，在查询器内判断
- /app-api/lowcode/deploy-api/** # 低代码 C端 部署接口，不需要登录，在查询器内判断

在数据库中导入 yudao-module-lowcode 模块 sql 文件， 根据版本不同， 文件名可能不同

第五步：配置 芋道-低代码 前端工程

安装前端依赖

pnpm install @imengyu/vue3-context-menu ace-builds vue3-ace-editor vue3-audio-player vue3-video-play

修改 src/router/index.ts 增加低代码模块路由

导入 lowcode-remaining 路由配置， 修改 routes 参数

import lowcodeRemainingRouter from './modules/lowcode-remaining'

// 创建路由实例
const router = createRouter({
  ...
  routes: [...remainingRouter, ...lowcodeRemainingRouter] as RouteRecordRaw[],
  ...
})

修改 vite.config.ts 文件， 修改分包逻辑

manualChunks(id) {
    // ========== 原分包逻辑 ==========
    if (id.includes('echarts')) {
        return 'echarts'; // 将 echarts 单独打包，参考 https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/IAB1SX 讨论
    }
    if (id.includes('@form-create/element-ui')) {
        return 'form-create'; // 参考 https://github.com/yudaocode/yudao-ui-admin-vue3/issues/148 讨论
    }
    if (id.includes('@form-create/designer')) {
        return 'form-designer';
    }

    // ========== 低代码模块分包 ==========
    if (id.includes('designer-editor.props.tsx')) {
        return 'designer-editor-props';
    }
}

第六步：启动测试

第七步：(可选) 导入测试数据

该部分为导入媒体库测试功能，根据需要可不导入，如需导入，请确保相关数据表 id 不冲突

在数据库中导入 媒体库 功能 sql 文件， 根据版本不同， 文件名可能不同，导入成功后，刷新前端页面即可看到，媒体库相关功能

媒体库-菜单

媒体库-查询器文件

媒体库-设计器文件

媒体库相关介绍，参考 媒体库(Demo)