Sehr geehrter Herr Habr, ich möchte Ihnen meine Erfahrungen bei der Auswahl und Verwendung von Formulargeneratoren für Vue.js mitteilen.

Einführung

Vielleicht weiß jeder, dass jede Wahl mit der Festlegung von Zielen, der Festlegung von Zielen und der Erstellung einer Liste von Anforderungen für die Objekte der Wahl beginnt. Dieser Artikel beschreibt die Funktionalität von Out-of-the-Box-Lösungen und soll nicht alle Fragen in diesem Thema beantworten.

Wenn Sie nur in diesen Themenbereich eintauchen, müssen Sie zunächst die Anwendbarkeit dieses Ansatzes auf Ihre Entwicklung bewerten. Die folgenden Situationen können unterschieden werden, wenn sich dieser Ansatz auszahlt:

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, , , , .

Wenn Ihre Wahl, wie die Wahl des Autors, bei ncform endet, können Sie diese Gabelung verwenden: github und npm . Im Rahmen dessen wurde daran gearbeitet, Fehler von Standardvalidatoren sofort ins Russische und Englische zu übersetzen, die Funktionalität der visuellen Komponenten der Element-Benutzeroberfläche wurde erweitert, die Arbeit einiger Validatoren wurde beispielsweise für Listenobjekte mit dem Array-Typ behoben.

Der Autor hofft, dass dieser Artikel den Schmerz der Wahl in einer ähnlichen Situation zumindest geringfügig lindert und dass Sie in kürzerer Zeit eine Lösung finden, die zu Ihnen passt.