在 vue-next-admin 中集成 form-create 低码平台的实践与踩坑记录

在 vue-next-admin 中集成 form-create 低码平台的实践与踩坑记录

本文记录了我在 vue-next-admin 项目中集成 form-create 低码平台的全过程，包括初次引入、渲染、遇到的典型问题及解决方法，适合有类似需求的同学参考。

一、背景

最近在做后台管理系统的低码平台功能，需要在 vue-next-admin《码云地址》《github地址》 项目中集成 form-create《github地址》《码云地址》 和 form-create-designer 《github地址》《码云地址》组件，实现表单的可视化拖拽设计和动态渲染。

二、主要改动

1. 在 main.ts 中全局引入 form-create-designer

import FcDesigner from '@form-create/designer'

app.use(FcDesigner).use(FcDesigner.formCreate)

2. 新增 lowCode 相关页面

在 src/views/ 目录下新增了一个目录lowCode，并写了两个页面：

• formCreate/index.vue：用于输入 JSON 并动态渲染表单

• formDesigner/index.vue：用于可视化拖拽设计表单

并在路由 src/router/route.ts 中添加了如下配置：

{
  path: '/lowCode',
  name: 'lowCode',
  component: () => import('/@/layout/routerView/parent.vue'),
  redirect: '/lowCode/menu',
  meta: { ... },
  children: [
    {
      path: '/lowCode/formCreate',
      name: 'lowCodeFormCreate',
      component: () => import('/@/views/lowCode/formCreate/index.vue'),
      meta: { ... },
    },
    {
      path: '/lowCode/formDesigner',
      name: 'lowCodeFormDesigner',
      component: () => import('/@/views/lowCode/formDesigner/index.vue'),
      meta: { ... },
    },
  ],
}

三、遇到的典型问题与解决方案

问题1：

现象

在 formCreate/index.vue 页面，发现输入框无法输入内容，表单区也无法正常渲染。

原因

vue3 的 <script setup> 是组合式 API 的语法糖，只有加了 setup，模板里才能直接使用定义的变量和方法。如果只写 <script lang="ts">，则变量不会暴露给模板，导致 input 绑定和表单渲染都失效。

解决

将 <script lang="ts"> 改为 <script setup lang="ts">，问题立刻解决。

- <script lang="ts">
+ <script setup lang="ts">

问题2：element-plus 国际化包路径报错，导致项目无法启动

这个详情去看我的上一篇博客，或者去我的主页查看——记录：vue-next-admin 项目 element-plus 国际化包报错的解决办法。

四、完整引入和渲染流程

1. 安装依赖

按需安装 form-create 及其 designer 组件：

 pnpm add @form-create/element-ui @form-create/designer

2. 全局注册

在 src/main.ts 中注册：

import FcDesigner from '@form-create/designer'
app.use(FcDesigner).use(FcDesigner.formCreate)

3. 页面开发

• formCreate/index.vue：支持输入 JSON 并实时渲染表单

• formDesigner/index.vue：支持拖拽设计表单并导出 JSON

4. 路由配置

在 src/router/route.ts 中添加 lowCode 相关路由。

五、效果预览

我没有本地服务，就放两张截图吧，大家谅解吧

• 访问/lowCode/formCreate 可体验 JSON 配置表单的实时渲染

• 访问 /lowCode/formDesigner 可体验可视化拖拽表单设计

• 访问源码，创作不易，记得给个star