عزيزي habr ، أود أن أشارككم تجربتي في اختيار واستخدام مولدات النماذج لـ Vue.js.

المقدمة

ربما يعلم الجميع أن أي خيار يبدأ بتحديد الأهداف وتحديد الأهداف وتشكيل قائمة بالمتطلبات للأشياء المختارة. توضح هذه المقالة وظائف الحلول الجاهزة وليس الغرض منها الإجابة على جميع الأسئلة الموجودة في هذا الموضوع.

, , — . , :

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

إذا كان اختيارك ، مثل اختيار المؤلف ، يتوقف عند ncform ، فيمكنك استخدام هذه الشوكة: github و npm . كجزء من ذلك ، تم العمل على ترجمة الأخطاء من المدققين القياسيين إلى الروسية والإنجليزية خارج الصندوق ، وتم توسيع وظائف المكونات المرئية لـ Element UI ، وتم إصلاح عمل بعض المدققين ، على سبيل المثال ، لكائنات القائمة مع نوع المصفوفة.

يأمل المؤلف أن يخفف هذا المقال قليلاً على الأقل من آلام الاختيار في موقف مشابه ، وأن تجد الحل الذي يناسبك في وقت أقل.