xinnian999/vue-form-craft

Vue Form Craft – 빠른 개요

설명: JSON schema를 기반으로 폼을 설계하고 렌더링할 수 있는 Vue 3 기반 라이브러리입니다. 시각적 드래그 앤 드롭 폼 빌더 (FormDesign)와 런타임 렌더러 (FormRender)를 포함합니다. 또한 schema 생성 및 편집을 위한 선택적 AI 지원 기능을 제공합니다.

주요 기능

• 시각적 디자이너 – 컴포넌트를 드래그하여 JsonSchema 생성.
• 렌더러 – FormRender가 schema를 사용하여 작동하는 폼을 생성.
• 복잡한 로직 – 필드 수준 표현식, 데이터/속성 연결, 중첩 배열 (FormList).
• 유효성 검사 – 내장 규칙(필수, 최소/최대값, 패턴, 사용자 정의 JS).
• AI 지원 schema 생성 – 간단한 ai 함수를 통해 모든 LLM 엔드포인트 연결.
• UI 어댑터 – Element Plus 기본 지원; Ant Design Vue로 교체 가능.

프로젝트 사용 방법

1. npm 패키지 설치:

   npm i vue-form-craft
   

2. 전역 등록 및 UI 라이브러리 선택:

   import ElementPlus from 'element-plus'
   import { createApp } from 'vue'
   import VueFormCraft from 'vue-form-craft'
   import 'element-plus/dist/index.css'
   const app = createApp(App)
   app.use(ElementPlus)
   app.use(VueFormCraft) // 또는 app.use(VueFormCraft, { ui: AntdAdapter })
   

3. schema 객체를 전달하고 v-model을 데이터에 바인딩하여 FormRender로 폼 렌더링.
4. 또는 시각적 빌더 FormDesign을 페이지에 배치하여 최종 사용자가 즉석에서 폼을 생성하도록 설정.
5. AI를 활성화하려면 LLM 엔드포인트를 호출하는 ai 함수를 제공하세요. 라이브러리가 프롬프트를 전달하고 생성된 schema 텍스트를 반환받습니다.

프로젝트 구조

• lib – 배포된 vue-form-craft 패키지 소스.
• play – 로컬 개발용 플레이그라운드.
• docs – 사용법 문서 및 라이브 데모가 포함된 VitePress 사이트.

대상 사용자 관리자 패널, 내부 도구 또는 동적이고 schema 기반의 폼이 필요한 Vue 3 애플리케이션을 구축하는 프론트엔드 팀. 특히 로우코드 시각적 편집기와 AI 지원이 필요한 경우에 적합합니다.

라이브 데모 및 문서

• Demo: https://form.elin521.cn/form-design.html
• Docs: https://form.elin521.cn/