# vue-form-making

<p>
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.5-brightgreen.svg" alt="vue">
  </a>
  
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.9.1-brightgreen.svg" alt="element-ui">
  </a>
  
  <a href="https://www.npmjs.com/package/form-making">
    <img src="https://img.shields.io/npm/dt/form-making" alt="downloads">
  </a>
  
  <a href="https://github.com/GavinZhuLei/vue-form-making/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/GavinZhulei/vue-form-making" alt="license">
  </a>
</p>

[简体中文](./README.zh-CN.md) | English

The FormMaking developed base on [vue](https://github.com/vuejs/vue) and [element-ui](https://github.com/ElemeFE/element), equipts with the latest front-end technology stack, built-in i18n internationalization solution, all of those are aimed at making developmemt simpler, and more efficiently.

**This project is the base version, and if you need to experience the [Advanced](https://form.making.link/#/en-US/), you can go to the advanced version, which provides more components and functionality, add support Vue3.**


* [Preview](https://form.making.link/basic-version#/en-US/)
* [Development](https://form.making.link/docs/en/bv/guide.html)
* [Components](https://form.making.link/docs/en/bv/component.html)
  * [MakingForm](https://form.making.link/docs/en/bv/component.html#form-designer-makingform) (Quickly design the form page based on the visual operation.)
  * [GenerateForm](https://form.making.link/docs/en/bv/component.html#form-generator-generateform) (The generator will render a form page quickly base on the configuration json data captured in the designer.)
* [Secondary Development](https://form.making.link/docs/en/bv/develop.html)

## Feature

* Visual configuration page
* Provide grid layout and align with flex
* One-click preview of configuration effects
* One-click generation of configuration json data
* One-click generate code, ready to run
* Provide custom components to meet user's custom requirements
* Provides a remote data interface for users to asynchronously fetch data
* Provides powerful advanced components
* Support for form validation
* Get form data quickly
* Internationalization support

## Advanced version

The advanced version provides more functionality than the base version:


* More beautiful pages;

* Add fields quickly by clicking;

* More property Settings, including data source and form events;

* More control fields (subforms, custom components, etc.);

* More layout containers and can be nested with each other (grids, tables, tabs);

* More apis for more complex business needs;

* Add custom fields, you can quickly introduce your own components;

* Can quickly add custom styles;

* Support data source, convenient form data configuration;

* Support action events, which can make forms more flexible configuration;

* Multi-terminal adaptation display;

* Provides Ant Design-style components (modified by the introduction of ANTD Vue);

* Support Vue3.

[Click here](https://form.making.link/#/en-US/).

## Third-party plug-ins

* [vuedraggable](https://github.com/SortableJS/Vue.Draggable)
* [element-ui](https://github.com/ElemeFE/element)
* [ace](https://github.com/ajaxorg/ace)
* [vue2-editor](https://github.com/davidroyer/vue2-editor)

## Browsers support

Modern browsers and Internet Explorer 10+.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

## Licenses

MIT