Cher habr, je souhaite partager avec vous mon expérience dans le choix et l'utilisation des générateurs de formulaires pour Vue.js.

introduction

Peut-être que tout le monde sait que tout choix commence par la fixation d'objectifs, l'établissement d'objectifs et la formation d'une liste d'exigences pour les objets de choix. Cet article décrit les fonctionnalités des solutions prêtes à l'emploi et n'est pas destiné à répondre à toutes les questions de cette rubrique.

Si vous ne faites que plonger dans ce domaine, la première chose à faire est d'évaluer l'applicabilité de cette approche à votre développement. Les situations suivantes peuvent être distinguées lorsque cette approche sera payante:

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 votre choix, comme celui de l'auteur, s'arrête à ncform, vous pouvez utiliser ce fork: github et npm . Dans ce cadre, un travail a été effectué pour traduire les erreurs des validateurs standard en russe et en anglais, les fonctionnalités des composants visuels de l'interface utilisateur d'élément ont été étendues, le travail de certains validateurs a été corrigé, par exemple, pour les objets de liste de type tableau.

L'auteur espère que cet article soulagera au moins légèrement la douleur du choix dans une situation similaire, et que vous pourrez trouver une solution qui vous convient en moins de temps.