Este artigo é uma continuação do meu artigo anterior apresentando uma lista de nove excelentes estruturas de IU do Vue 3. Essas estruturas aprimoram a experiência de desenvolvimento, a capacidade de manutenção e o design final do seu aplicativo Vue.
Hoje, vou estaremos falando sobre mais cinco novos frameworks Vue 3 UI que vêm com uma panóplia de componentes incríveis (por exemplo, navbars, entradas e caixas de seleção) que o ajudarão a construir interfaces ou seus próprios componentes sem esforço. Além disso, alguns desses frameworks são fornecidos com funções, plug-ins e diretivas que podem abstrair toda uma camada de complexidade em sua IU, como carregamento lento, rolagem infinita e depuração, para citar alguns.
IU do Oruga
Oruga UI foi mencionada como uma “estrutura de interface do usuário mais esperada” em meu post anterior. Isso ocorre porque a Oruga vem enviando componentes leves e discretos desde o Vue 2, uma boa tendência que continua na nova versão do Vue 3.
O Oruga fornece componentes que se concentram na funcionalidade ao invés do estilo, o que o torna um sólido base sobre a qual você pode construir seus próprios componentes.
Em seu site, Oruga adota uma filosofia única: “[Queremos] que você se concentre apenas nos aspectos de UI/UX de sua aplicação e seja totalmente flexível para o futuro muda sem ter que tocar em uma linha de JavaScript. ”
Isso ilustra que o Oruga fornece um ambiente não opinativo no qual você pode construir o que quiser. Eles levaram esse pensamento para o próximo nível, fornecendo um alternador CSS em seu site; esta alternância tem a capacidade de ativar e desativar seu CSS personalizado nos documentos, permitindo que você visualize componentes sem nenhum dos estilos padrão aplicados.
Eu selecionaria Oruga como uma estrutura se estou procurando um belo pacote de componentes extremamente personalizáveis nos quais posso aplicar meu próprio estilo ou sistema de design. Além disso, mesmo se eu quiser editar os estilos padrão, Oruga permite isso com uma tonelada de variáveis CSS esperando para receber estilos personalizados para substituir ou aprimorar. Oruga oferece uma ótima experiência em termos de configuração e personalização.
Vuestic UI
Vuestic é conhecido por fazer um dos mais bonitos painéis de administração de código aberto para Vue. Eles se destacam na escrita de código Vue de fácil manutenção e na criação de componentes e interfaces inteligentes.
A equipe anunciou recentemente o Vuestic UI, sua estrutura de interface do Vue 3, contendo todos os componentes usados na popular interface de usuário do Vuestic Admin e muito mais. O Vuestic enfatiza seu suporte pronto para uso para navegação por teclado, um recurso valorizado na comunidade de front-end devido à UX que fornece.
O Vuestic fornece mais de 50 componentes com recursos exclusivos e ampla configurabilidade. Com design responsivo, esses componentes se encaixam em quase todas as telas. O Vuestic é fornecido com suporte para tradução e acessibilidade de teclado em todo o framework.
O Vuestic já se estabeleceu como um dos frameworks de interface do usuário Vue 3 mais esteticamente agradáveis com seu catálogo de belos componentes. Eles agora estão em um bom ritmo para criar componentes muito mais complexos, como um selecionador de data ou uma tabela de dados, que certamente parecerão tão criativos quanto suas ofertas atuais.
Vuestic se encaixará perfeitamente em seu aplicativo, se você quiser para construir componentes funcionais e de boa aparência. Os componentes são responsivos por design e se encaixam em qualquer tema graças ao alto nível de personalização.
UI ingênua
IU ingênua era modestamente anunciado para o mundo no Twitter , então retuitado pelo criador do Vue, o que trouxe muito tráfego para esta nova biblioteca de componentes. Agora, o Naive UI tem merecidos 4,7 mil estrelas no GitHub em menos de três meses de existência.
Ele vem com mais de 70 componentes extremamente bem elaborados que podem se encaixar perfeitamente em quase qualquer tipo de Vue 3 aplicativo. Os componentes do Naive são eficientes, extremamente personalizáveis e têm suporte TypeScript de primeira classe para oferecer uma ótima experiência de desenvolvimento.
O site de documentação é fácil de navegar e tem entradas de personalização completas para ajudar os desenvolvedores a visualizar como os componentes ficarão dentro de seu próprio tema. Você pode brincar com as opções para criar seu próprio tema completo com padrões de cores e fontes. Este tema personalizado pode ser baixado e facilmente adicionado ao seu aplicativo para substituir os padrões.
Dentro da grande biblioteca de componentes do Naive, todos eles podem ser abalados por árvores, suportam temas claros e escuros e fornecem adereços extensos e eventos para criar um esqueleto para seu próprio componente complexo ou para integrar perfeitamente em seu próprio aplicativo.
O Naive fornece quase tudo que é necessário para desenvolver um aplicativo Vue 3 maduro. Cada componente é rápido e consistente, e os componentes de exibição de dados são fornecidos com grandes habilidades de carregamento lento.
Eu selecionaria Naive para sobrecarregar meu aplicativo Vue sem comprometer a velocidade ou qualquer um dos meus componentes existentes.
Varlet UI
Varlet UI é uma biblioteca de componentes móveis do Material Design para Vue 3. Ela pode ser considerada uma versão compatível e orientada para dispositivos móveis do conhecido Vuetify Estrutura de IU.
Varlet vem com 40 componentes leves e de alta qualidade e oferece ótimo TypeScript, SSR e suporte de internacionalização. Varlet se apóia no Material Design, que já está muito bem estabelecido em experiências móveis, dando a seus usuários um passo à frente no processo de aprendizagem de como os componentes funcionam.
A natureza instável dos componentes do Varlet permite que eles para ser leve e acessível. Além disso, Varlet oferece um guia de configuração de IDE e uma extensão para aumentar a produtividade do desenvolvedor.
Varlet é minha escolha se eu gostaria de ter componentes de design de material bonitos e responsivos com uma tendência para interfaces de usuário móveis.
Vant UI
Vant UI oferece mais de 65 componentes leves e reutilizáveis. Os componentes da Vant são conhecidos por serem adaptados para uso móvel e por sua capacidade de serem totalmente personalizáveis. Vant é um forte concorrente do Ionic framework , oferecendo componentes raros, como entradas de senha , contagens regressivas, puxar para atualizar, notificações e muito mais.
Depois de navegar pelo catálogo de componentes da Vant, fica claro que eles se concentram em dispositivos menores, mas permanecem flexíveis o suficiente para serem estendidos para aplicativos da web. Vale a pena mencionar que esses componentes são todos flexíveis e, como tal, podem ser importados individualmente para o seu aplicativo.
A Vant tem um site de documentação extenso, com várias demonstrações, APIs de eventos, APIs de slot, exemplos de código e até casos extremos. A Vant também oferece componentes digitados para ajudar na conclusão do código e oferece suporte a SSR, temas e internacionalização, tornando-se uma solução à prova de balas para a maioria dos desenvolvedores.
A Vant seria incrível se você precisasse criar um aplicativo que ficam ótimas no celular. Esses componentes se encaixam perfeitamente em qualquer PWA e fazem seu aplicativo da web parecer nativo sem muitos problemas.
Conclusão
conforme o Vue cresce exponencialmente, ele cria organicamente bibliotecas e estruturas muito melhores devido ao fato que os autores têm uma API poderosa, de alto desempenho e extensa para se apoiar. Agora os desenvolvedores podem criar formas mais criativas para facilitar a criação de interfaces de usuário e, ao mesmo tempo, quebrar a maioria dos limites que eles encontraram anteriormente.
Devido à abordagem perspicaz do Vue aos detalhes que mais importam para os desenvolvedores de front-end (experiência do desenvolvedor, desempenho , reatividade e gerenciamento de estado, para citar alguns), é seguro dizer que todo o ecossistema Vue vale a pena monitorar de perto nos próximos anos.
