Escolhendo um gerador de formulário para Vue.js

Caro habr, gostaria de compartilhar com você minha experiência na escolha e uso de geradores de formulários para Vue.js.





Introdução



Talvez todos saibam que qualquer escolha começa com a fixação de metas, estabelecendo metas e formando uma lista de requisitos para os objetos de escolha. Este artigo descreve a funcionalidade de soluções prontas para usar e não se destina a responder a todas as perguntas neste tópico.



, , — . , :



  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







, ~360 github, 2018 , Element UI, , .





  • 1.1.1, 2.0.0 alpha production ;
  • , « » ;
  • , Vue.js 2.2.0 .




  • JSON schema ;
  • Element UI.


ncform







, ~900 github . , . . Unit cypress. , JSON schema, .





  • ;
  • JSON schema;
  • UI controls.




  • ;
  • ;
  • JSON schema dx-;
  • Element UI.


vue-form-generator







github ~2500, . , .





  • JSON , — ;
  • , JSON schema;
  • i18n ;
  • .




  • ;
  • ;
  • Element UI.


vue-form-json-schema







JSON schema , UI , UI — uiSchema. ajv, , ajv-errors. , uiSchema.





  • Element UI, ;
  • uiSchema, template vue-.




  • JSON schema;
  • , ;
  • , .


vue-ele-form







github ~530, . demo , .





  • , ;
  • JSON schema .




  • , ;
  • 10 ;
  • Element UI.


form-create







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



Se sua escolha, assim como a escolha do autor, parar em ncform, você pode usar este fork: github e npm . Dentro dessa estrutura, o trabalho foi feito para traduzir erros de validadores padrão em russo e inglês fora da caixa, a funcionalidade dos componentes visuais da interface do usuário do elemento foi expandida, o trabalho de alguns validadores foi corrigido, por exemplo, para objetos de lista com o tipo de matriz.



O autor espera que este artigo alivie pelo menos um pouco a dor de sua escolha em uma situação semelhante e que você possa encontrar uma solução que se adapte a você em menos tempo.




All Articles