Querido habr, quiero compartir contigo mi experiencia en la elección y uso de generadores de formularios para Vue.js.

Introducción

Quizás todo el mundo sepa que cualquier elección comienza con fijar metas, establecer metas y formar una lista de requisitos para los objetos de elección. Este artículo describe la funcionalidad de las soluciones listas para usar y no pretende responder todas las preguntas dentro de este tema.

Si se está sumergiendo en esta área temática, lo primero que debe hacer es evaluar la aplicabilidad de este enfoque a su desarrollo. Se pueden distinguir las siguientes situaciones en las que este enfoque dará sus frutos:

1. , , copy & paste ;
2. UX (User eXperience);
3. .

( ):

1. Vue.js;
2. Element UI, ;
3. JSON schema, ;
4. , .

- , , , README . , , .

, . , , React Angular, , Vue.js, , , . Element — UI kit, - , , - .

vue-json-schema

• (2.0.0-alpha.2): github npm;
• Fork ( legacy 1.1.1): github npm;
• Element UI: github, .

, ~360 github, 2018 , Element UI, , .

• 1.1.1, 2.0.0 alpha production ;
• , « » ;
• , Vue.js 2.2.0 .

• JSON schema ;
• Element UI.

ncform

• : github npm;
• Element UI: github npm;
• UI controls;
• Demo ;
• JSON ;
• .

, ~900 github . , . . Unit cypress. , JSON schema, .

• ;
• JSON schema;
• UI controls.

• ;
• ;
• JSON schema dx-;
• Element UI.

vue-form-generator

• : github npm;
• Element UI: github npm;
• Fork Element UI c : github npm;
• UI controls , vue ;
• vue-form-generator.

github ~2500, . , .

• JSON , — ;
• , JSON schema;
• i18n ;
• .

• ;
• ;
• Element UI.

vue-form-json-schema

• : github npm

JSON schema , UI , UI — uiSchema. ajv, , ajv-errors. , uiSchema.

• Element UI, ;
• uiSchema, template vue-.

• JSON schema;
• , ;
• , .

vue-ele-form

• : github npm.

github ~530, . demo , .

• , ;
• JSON schema .

• , ;
• 10 ;
• Element UI.

form-create

• : github npm.

~2100 github, . JSON, , JSON schema. Element UI.

• JSON schema ;
• , , , ;

• , : Text, JSON, Code Markdown ;
• Element UI.

vue-vuelidate-jsonschema

• .

, Vue , state , .

json2vue

• .

JSON, , .. , ..

vue-form-builder

• .

, Element UI, .

, , :

• vue-form-json-schema , Element UI, uiSchema , , ;
• vue-json-schema , , , Element UI;
• ncform JSON schema , Element UI, ;
• vue-form-generator JSON schema , i18n, Element UI.

, :

• JSON schema;
• ;
• ;
• Element UI.

, ncform . JSON schema , Element UI, , , , .

Si su elección, como la elección del autor, se detiene en ncform, entonces puede usar esta bifurcación: github y npm . Como parte de esto, se ha trabajado para traducir los errores de los validadores estándar al ruso y al inglés, la funcionalidad de los componentes visuales de Element UI se ha ampliado, el trabajo de algunos validadores se ha corregido, por ejemplo, para lista de objetos del tipo de matriz.

El autor espera que este artículo alivie al menos un poco el dolor de la elección en una situación similar y que pueda encontrar una solución que se adapte a sus necesidades en menos tiempo.