form-generator

This project is a visual form designer and code generator built for Vue.js applications that use the Element UI component library. Element UI is a widely-used set of ready-made interface components for Vue. The tool provides a drag-and-drop canvas for laying out form fields, then automatically produces the Vue code that matches the design, ready to copy into a project.

There are two main outputs the tool can produce. The first is working Vue code that runs directly in any project already using Element UI. The second is a JSON representation of the form, which can be saved to a database and later converted back into a live form using a companion parser. The parser is published as a separate npm package called form-gen-parser, installable with a single command.

A VS Code plugin is also provided for developers who prefer to stay in their editor. It lets developers right-click to open the form designer, visually configure the form, and save the resulting code directly into the project without switching applications. The plugin is searchable in the VS Code marketplace under the name Form Generator Plugin.

The Monaco editor, the same editor engine that powers VS Code, is used inside the interface for displaying and editing generated code. The README is written in Chinese, and the project includes QQ chat groups for community discussion. It is released under the MIT license.