前言

在企业管理后台的开发中，我们常常面临一个两难选择：使用低代码平台可以快速搭建页面，但往往受制于平台灵活性，一旦需求超出平台能力边界就寸步难行；坚持纯手工编码则能保证完全可控，但大量重复的CRUD页面开发又耗费了太多精力。

有没有一种方案，既能享受低代码的「快」，又能保留源码开发的「自由」？

本文介绍的就是这样一个解决方案——将 VTJ.PRO 低代码设计器集成到 芋道（yudao-ui-admin-vue3）管理后台中，让两者优势互补，实现1+1>2的开发体验。

关于 VTJ.PRO

VTJ.PRO 是一款面向专业开发者的 AI 驱动型 Vue3 低代码开发平台。它的核心定位是“降低复杂度，不降低自由度”，深度融合可视化设计与源码开发，支持多端应用构建。

VTJ.PRO 最引人注目的特性是其 “双向代码转换”引擎——通过 @vtj/parser 和 @vtj/coder 实现 Vue 单文件组件（SFC）与内部 DSL 的无缝双向转换。这意味着：

• 设计 → 代码：通过拖拽生成的界面，可以一键转换为标准的 Vue 组件代码
• 代码 → 设计：已有的 Vue 组件也可以反向导入到设计器中进行可视化编辑

这种设计从根本上解决了低代码平台的“锁定”问题——你随时可以脱离设计器，在源码层面继续开发。

此外，VTJ.PRO 还具备以下优势：

• 技术栈先进：基于 Vue3 + TypeScript + Vite，深度整合 ElementPlus、ECharts、Axios 等主流工具链
• 零污染集成：设计器与渲染器分离，嵌入现有工程不影响代码结构，产物支持二次开发
• AI 增强：支持设计稿智能识别（Sketch/Figma），可自动生成组件代码
• 物料丰富：内置多套企业级组件库和页面模板

关于芋道管理后台

芋道管理后台（yudao-ui-admin-vue3）是一套基于 Vue3 + Element Plus 的免费开源中后台模板。它采用最新的技术栈（Vue3、Vite4），支持 TypeScript，并提供了可配置的主题系统，是许多企业级项目首选的 Admin 框架。

为什么要集成？

将 VTJ.PRO 设计器集成到芋道后台中，可以带来以下价值：

1. 快速搭建页面：管理后台中大量的列表页、表单页、详情页，可以通过拖拽快速生成，大幅提升开发效率
2. 保持代码可控：生成的代码是标准的 Vue 组件，可以随时进行二次开发和深度定制
3. 渐进式引入：不需要一次性重构整个项目，可以在现有项目中逐步引入低代码能力
4. 团队协作提效：产品经理或运营人员可以在设计器中直接调整页面布局，减少沟通成本

集成步骤

下面详细介绍集成过程。整个过程大约需要 15-30 分钟。

第一步：修改 package.json

首先在项目的 package.json 中增加 VTJ 相关依赖：

{
  "dependencies": {
    "@vtj/web": "latest"
  },
  "devDependencies": {
    "@vtj/cli": "latest",
    "@vtj/pro": "latest"
  }
}

由于 VTJ 内置了兼容版本的 Vite 等构建工具，需要删除原有的 Vite 相关依赖以避免版本冲突：

{
  "devDependencies": {
    "vite": "8.0.10",
    "@vitejs/plugin-vue": "^6.0.6",
    "@vitejs/plugin-vue-jsx": "^5.1.5"
  }
}

说明：VTJ 内置了 Vite 等依赖的兼容版本，因此无需额外声明。

最后，在 package.json 中添加 VTJ 设计器配置：

{
  "vtj": {
    "history": "web",
    "noMask": "true"
  }
}

第二步：修改 vite.config.ts

在 Vite 配置文件中引入 VTJ 的开发工具插件：

import { createDevTools } from '@vtj/pro/vite'

export default defineConfig({
  plugins: [
    // ... 其他插件
    createDevTools({ linkOptions: { href: '/__vtj__/#/' } })
  ]
})

这个插件会在本地开发服务中启动 VTJ 设计器所需的 HTTP 服务，设计器的项目数据默认以 JSON 文件形式存储在项目根目录的 .vtj 文件夹中。

第三步：新增 src/modules.ts

创建 src/modules.ts 文件，用于动态加载 VTJ 的项目文件：

export function createModules() {
  return import.meta.glob(['/.vtj/projects/*.json', '/.vtj/files/*.json', '/.vtj/vue/*.vue'])
}

VTJ 设计器生成的项目数据、页面文件和 Vue 组件都会存储在这些目录中，通过 import.meta.glob 可以实现按需动态加载。

第四步：改造 src/main.ts

这是集成中最关键的一步，需要将应用启动逻辑改造为 VTJ 的渲染器模式：

import { createProvider, LocalService, ContextMode } from '@vtj/renderer'
import { createModules } from './modules'

const service = new LocalService()
const { provider, onReady } = createProvider({
  materialPath: '/',
  mode: ContextMode.Runtime,
  modules: createModules(),
  service,
  router,
  dependencies: {
    Vue: () => import('vue'),
    VueRouter: () => import('vue-router'),
    Pinia: () => import('pinia'),
    VueI18n: () => import('vue-i18n')
  },
  routeAppendTo: 'Pages',
  enableStaticRoute: true
})

// 将原来的应用初始化逻辑改为在 onReady 回调中执行
onReady(setupAll)

这里的 LocalService 是 VTJ 内置的服务实现，数据以本地 JSON 文件方式存储。通过 routeAppendTo: 'Pages' 配置，VTJ 生成的页面路由会自动挂载到 Pages 路由下。

第五步：配置路由

在 /src/router/modules/remaining.ts 中，为 Home 路由增加 VTJ 页面子路由：

{
  path: '/',
  component: Layout,
  redirect: '/index',
  name: 'Home',
  meta: {},
  children: [
    {
      path: '',
      name: 'HomeIndex',
      redirect: '/index',
      meta: { hidden: true }
    },
    {
      path: '',       // VTJ 页面路由挂载点
      name: 'Pages',
      meta: { hidden: true }
    }
  ]
}

Pages 这个空路由作为 VTJ 页面的挂载点，所有通过设计器创建的页面路由都会自动添加到这个节点下。

启动与配置菜单

完成以上五步后，启动项目：

pnpm dev

项目启动后，在页面的右下角会出现编辑图标，点击即可进入 VTJ 设计器。

配置后台菜单的步骤：

1. 在 VTJ 设计器中创建所需的页面
2. 复制 VTJ 页面的路由地址
3. 在芋道后台的菜单管理中添加对应菜单，填入复制的路由地址
4. 刷新页面，即可看到新菜单和对应的 VTJ 页面

集成效果

集成完成后，芋道管理后台将获得以下能力：

• 可视化页面搭建：通过拖拽组件快速构建管理后台页面，无需手写大量模板代码
• 源码级控制：生成的页面是标准 Vue 组件，可以随时切换到源码模式进行精细化调整
• 路由自动管理：VTJ 页面自动挂载到后台路由系统中，与原有页面无缝融合
• 数据持久化：页面数据以 JSON 格式存储在项目中，可以提交到 Git 进行版本管理

总结

通过以上五个步骤，我们成功地将 VTJ.PRO 低代码设计器集成到了芋道管理后台中。这种集成方案的核心价值在于：

它不是一个“二选一”的方案，而是一个“既有又有”的方案——既有低代码的高效，又有源码开发的自由。

对于中后台管理系统中大量存在的 CRUD 页面，开发者可以通过设计器快速搭建；当遇到复杂业务逻辑时，又可以随时切换到源码模式进行深度定制。这种灵活性，正是 VTJ.PRO 提出的“低代码不低能力”理念的最好体现。

如果你也在使用芋道管理后台，或者任何基于 Vue3 的后台框架，不妨试试集成 VTJ.PRO，体验一下“可视化搭建 + 源码可控”的全新开发模式。

相关链接：

• VTJ.PRO 官网：https://vtj.pro
• VTJ.PRO Gitee 仓库：https://gitee.com/newgateway/vtj
• 在线体验：https://app.vtj.pro
• 芋道集成示例：https://gitee.com/newgateway/yudao-ui-admin-vue3