Dear habr, saya ingin berbagi dengan Anda pengalaman saya dalam memilih dan menggunakan generator formulir untuk Vue.js.

pengantar

Mungkin semua orang tahu bahwa pilihan apapun dimulai dengan menetapkan tujuan, menetapkan tujuan, dan membentuk daftar persyaratan untuk objek pilihan. Artikel ini menjelaskan fungsionalitas solusi out-of-the-box dan tidak dimaksudkan untuk menjawab semua pertanyaan dalam topik ini.

, , — . , :

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

Jika pilihan Anda, seperti pilihan penulis, berhenti di ncform, maka Anda dapat menggunakan garpu ini: github dan npm . Sebagai bagian dari itu, pekerjaan telah dilakukan untuk menerjemahkan kesalahan dari validator standar ke dalam bahasa Rusia dan Inggris di luar kotak, fungsionalitas komponen visual UI Elemen telah diperluas, pekerjaan beberapa validator telah diperbaiki, misalnya, untuk objek daftar dengan tipe array.

Penulis berharap artikel ini setidaknya akan sedikit meringankan rasa sakit karena pilihan dalam situasi yang sama, dan Anda dapat menemukan solusi yang sesuai untuk Anda dalam waktu yang lebih singkat.