Se você gosta de criar aplicativos no Vue.js, mas não sabe por onde começar com o design da interface do usuário, não procure mais, o Vuetify – uma biblioteca de interface do usuário que contém componentes de materiais artesanais que dão aos aplicativos um acabamento bonito e uma sensação profissional.
Por que aprender Vuetify?
O Vuetify é a biblioteca de componentes mais popular do Vue.js, permitindo criar aplicativos acessíveis e de ótima aparência, mesmo que o design da interface do usuário não seja sua área. Embora a biblioteca tenha mais de 80 elementos prontos para uso direto da caixa, também permite criar elementos personalizados, dando aos seus aplicativos uma sensação limpa e personalizada.
Este artigo leva você através do Scrimba gratuito curso Vuetify de duas horas de Gwen Faraday. O curso ensina todas as principais habilidades necessárias para iniciar o Vuetify, incluindo:
- Tipografia
- Espaçamento
- Botões
- Navegação
- Rede
- Cartão
Na primeira metade, Gwen apresenta todos os elementos Vuetify necessários para criar um ótimo aplicativo. Como em todos os cursos do Scrimba, você pode pausar os scrims e explorar o código.
A segunda metade permite sujar as mãos criando uma loja virtual. Isso coloca suas novas habilidades em bom uso e permite que você aplique seus novos conhecimentos.
No final, você será versado na criação de aplicativos com estilo profissional com o Vuetify.
Introdução ao instrutor
Gwen Faraday é engenheira de software, autora, palestrante e criadora de conteúdo e também administra um canal do YouTube, Academia Faraday, onde ela ensina uma ampla variedade de assuntos, incluindo Vue.js e Vuetify. Isso a torna a professora perfeita para levá-lo nessa jornada de aprendizado e levar suas habilidades do Vuetify para o próximo nível.
Pré-requisitos
Para aprender ao máximo este tutorial, você precisará de um entendimento decente de HTML, CSS, Javascript e Vue.js. Se você ainda não está lá, confira os excelentes cursos gratuitos do Scrimba para se atualizar:
Introdução ao Vuetify
No primeiro elenco, Gwen nos apresenta o Vuetify e compartilha os dois repositórios do Github onde ela armazenou todo o código, componentes básicos e responsivo ao vuetify. Isso nos permite fazer o download do código e testá-lo por nós mesmos.
O que é design de materiais?
Próximo, aprendemos sobre o Design de materiais, um padrão desenvolvido pelo Google para implementar interfaces acessíveis e fáceis de usar.
O Material Standard fornece um conjunto de regras para os elementos mais comuns encontrados nas páginas da Web, incluindo botões, texto, navegação e recursos mais avançados, como movimento e elevação.
O Vuetify elimina o trabalho árduo de implementar esse padrão, fornecendo vários elementos de interface do usuário compatíveis prontos para adicionar que podemos adicionar ao nosso aplicativo Vue.js.
Primeiro, veja o código Vuetify
No próximo elenco, Gwen nos mostra pela primeira vez o código Vuetify instanciando um aplicativo Vue, adicionando uma propriedade Vuetify e criando um novo objeto Vuetify:
new Vue({ el: "#app", vuetify: new Vuetify({}), data: { message: "Using Single File Components", },});Em seguida, Gwen nos mostra o
Tipografia
Clique na imagem para acessar o curso.
No o próximo scrim, vemos algumas das opções que o Vuetify oferece para lidar com a tipografia, incluindo títulos, títulos, legendas e texto do corpo. Também vemos como alterar a cor do texto e a cor do plano de fundo.
Heading 1
Heading 2
Heading 3
Title
Subtitle
Body
Por fim, vemos como usar as classes Vuetify para ajustar o peso e o estilo da fonte:
Heading 1
Nota: As classes Vuetify substituem qualquer outro estilo que o navegador aplique às tags HTML.
Espaçamento
Próximo, exploramos algumas das classes de espaçamento no Vuetify, que nos permitem adicionar margens e preenchimento. Também vemos como alterar o tamanho do espaçamento.
Spacing
O melhor de tudo é que Gwen também nos mostra como as aulas do Vuetify podem ajudar com esse santo graal do estilo de aplicativos – centralizando um elemento! Clique no curso para saber mais.
Botões
Clique na imagem para acessar o curso.
No próximo scrim, examinamos algumas das opções disponíveis no componente de botão do Vuetify, incluindo botões com texto, ícones ou ambos.
Submit Por fim, examinamos como criar botões personalizados usando as classes anteriores.
Navegação
Clique na imagem para acessar o curso.
Próximo, analisamos as duas principais opções de navegação disponíveis no Vuetify,
App Title Clique através para ver tudo isso em ação!
Rede
Clique na imagem para acessar o curso.
No o próximo scrim, Gwen nos conduz pelo sistema de grade do Vuetify, dividido em 12 colunas, com cinco pontos de interrupção de mídia incorporados para lidar com diferentes tamanhos de tela.
Column Cartão
Clique na imagem para acessar o curso.
No este elenco, Gwen explica que o Vuetify usa um
mdi-twitter "Vue Rocks!" Gwen também nos apresenta o
Por fim, verificamos o Playground.vue arquivo – um espaço para explorarmos os recursos do Vuetify Gwen nos mostrou até agora. Head over para o curso para experimentar você mesmo e ver o que o Vuetify pode fazer.
Navegação na loja
Clique na imagem para acessar o curso.
Próximo, é hora de começar a criar nosso aplicativo de loja. Gwen nos inicia adicionando uma barra de navegação, incluindo capacidade de resposta e um menu de gaveta. Também analisamos algumas opções de estilo, incluindo ícones e um menu denso.
Pagina inicial
Próximo, é hora de adicionar uma página inicial. Gwen adiciona o cabeçalho e o rodapé e depois nos define o desafio de codificar a seção intermediária usando os modelos fornecidos. Head over para o screencast para testar suas novas habilidades em Vuetify e comparar seu trabalho com a solução de Gwen.
Para terminar, Gwen nos mostra o
{{ $store.state.snackbar.message }} Close Página da loja
Clique na imagem para acessar o curso.
No próximo Scrim construímos nossa página de loja usando elementos de grade do Vuetify. Primeiro, adicionamos cartões de produtos reutilizando os cartões que construímos para nossa página inicial. Em seguida, Gwen nos desafia a construir uma barra lateral com o
Head over para o elenco para tentar o desafio.
Página do carrinho
Clique na imagem para acessar o curso.
Próximo, adicionamos uma página de carrinho ao nosso aplicativo. Mais uma vez, Gwen nos define o desafio de codificar a página de acordo com seus modelos, o que é uma ótima prática para a codificação do mundo real e flexiona a memória muscular necessária para se tornar um assistente do Vuetify.
Clique para dar o melhor resultado ao desafio antes de comparar seu trabalho com o código final de Gwen. Não se esqueça, você sempre pode olhar para os scrims anteriores ou verificar os documentos do Vuetify se estiver com problemas.
Tela de checkout
No scrim de código final, criamos um fluxo de checkout simples usando o
Para concluir o curso, Gwen ressalta que existem alguns recursos nos modelos que não abordamos e nos incentiva a tentar codificá-los nós mesmos usando a interface interativa do Scrimba.
Conclusão
Um enorme bem feito para completar o curso! Espero que você tenha achado útil e agora tenha confiança para criar aplicativos impressionantes usando o Vuetify. Por que não continuar sua jornada de aprendizado, verificando a enorme variedade de outros tópicos disponíveis em Scrimba?
Onde quer que você vá, codificação feliz 🙂
