親愛なるhabr、Vue.jsのフォームジェネレーターを選択して使用した私の経験を皆さんと共有したいと思います。

前書き

おそらく誰もが、選択は目標の修正、目標の設定、選択したオブジェクトの要件のリストの作成から始まることを知っています。この記事では、すぐに使用できるソリューションの機能について説明しますが、このトピック内のすべての質問に答えることを目的としたものではありません。

この主題分野に飛び込んでいる場合、最初に行う必要があるのは、開発へのこのアプローチの適用可能性を評価することです。このアプローチが効果を発揮する場合、次の状況を区別できます。

, , copy & paste ;
UX (User eXperience);
.

( ):

Vue.js;
Element UI, ;
JSON schema, ;
, .

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

作成者の選択のように、選択がncformで停止する場合は、次のフォークを使用できます：githubおよびnpm。その一環として、エラーを標準のバリデーターからロシア語と英語にすぐに変換する作業が行われ、Element UIビジュアルコンポーネントの機能が拡張され、一部のバリデーターの作業が修正されました。たとえば、配列タイプのリストオブジェクトの場合などです。

著者は、この記事が同様の状況での選択の苦痛を少なくともわずかに軽減し、あなたがより短い時間であなたに合った解決策を見つけることができることを望んでいます。

Vue.jsのフォームジェネレーターの選択

前書き