Trilha Vuejs — O que aprender e como começar

Emanuel G de Souza
6 min readFeb 18, 2018

--

Fala meus amigos, é um prazer ver você aqui neste meu texto. Mais uma vez, eu aqui, trazendo um texto sobre Vuejs, este framework / lib muito bacana de se trabalhar. Creio que se você chegou neste texto, é porque estava buscando algum direcionamento em o que estudar para conhecer e dominar este framework. Se foi por isso, espero que este texto possa trazer este direcionamento. A seguir, uma trilha básica do que saber, construir, para se ter um domínio maior sobre Vuejs e ao redor do texto, algumas boas práticas que venho colhendo com meu trabalho ao lado do Vinicius Reis e dessa comunidade imensa que é a comunidade do Vuejs.

Aliás, você sabe o que é Vuejs? Antes de continuar, dá uma lida nestes textos:

Este último, é um comparativo feito pelo Vinicius Reis sobre Vuejs e React, vale a pena a conferida:

Bem, já entendeu o que é Vuejs? Se tu já sabe, vamos ao que interessa.

O que saber para se trabalhar com Vuejs?

Esta é uma pergunta recorrente: o que preciso saber para se trabalha com Vue, a primeira resposta dada pela comunidade é bem simples:

Você sabe Javascript?

Sem saber o que é JS, você não vai ter uma boa experiência com Vue, e pior, não irá aproveitar todo o ganho que Vue pode te dar. No final das contas, todo FW JS é JS no final. Você não estará codando em uma linguagem nova, você estará codando em JS. Portanto, saber JS é fundamental. Então, como aprendo JS? A seguir, alguns conteúdos bacanas:

O próximo é um excelente material para um iniciante em JS:

Por fim, fui pupilo do Vinicius Reis no Training Center e ele me recomendou esses tópicos para estudo:

Bem, agora que você já possui um domínio de conhecimento em JS e já sabe o que é Vue, vamos aos conteúdo interessantes para Vuejs:

Caminhando no conhecimento do Vuejs

É sério, Vuejs é muito simples de aprender e entender quando já tem um domínio de conhecimento do JS. Sabe o que é mais interessante? Tudo que você precisa saber sobre Vuejs está na documentação do mesmo:

Portanto, antes de olhar qualquer coisa, dá uma olhada nessa doc.

Deu aquela lida geral na doc? Então, o próximo passo é construir alguma coisa. O que recomendo, é o que o Vinicius trabalhou comigo na mentoria: construa uma agenda telefônica, de preferência com operações de CRUD. O que eu trabalhei na época foi usar o localstorage para armazenar os dados.

Se quiser olhar um pouco de código, dá uma lida nesses:

Esta último foi a que eu fiz para aprendizado de algumas coisinhas :)

Recomendo também dar uma olhada nos vídeos do pessoal do Codecasts e do PHPZM

O Professor Fabio Vedovelli tem colocado uns vídeos bacanas também sobre Vue, vale a pena a conferida.

Indo além do básico

O Vue possui um ecossistema enorme. A seguir, o que é interessante de se aprender:

Com estas três libs juntas você já consegue construir aplicações Single Page completas.

Conhecendo um pouco mais

Aqui vai algumas dicas para Vuejs:

Leia a Style Guide do Vuejs

Com ela você terá um norte do que são boas práticas em projetos Vuejs, como construir seus Single File Components entre outras coisas.

Tem uns textos interessantes do Vinícius sobre o assunto:

Coloque a mão no código para aprender Arquiteturas de Projetos

Este último texto é interessante a lida cuidadosa, junto com a documentação do axios, para você entender como trabalhar com uma área muito importante de uma SPA: serviços.

O pessoal do PHP ZM, que produz uns conteúdos massa para Vuejs, possui um repositório de um dashboard que pode ser inspiração para você:

Tem um projeto completo mantido pelo Core Team para você se espelhar:

Conheça o ecossistema Vue

Lembrando, conhecer não é o mesmo que dominar. É importante saber, olhar e ler, sobre a tecnologia que você pretende dominar. Eu diria que é importante você não somente estar inteirado sobre Vuejs, mas sobre Javascript.

Este é o repositório de coisas bacanas feitas para Vue. Você quer componentes visuais? Tá la. Você precisa de um componente para gráficos, tá la.

Para finalizar, gostaria de deixar um conselho:

Nunca deixe de meter a mão no código e escrevê-lo. Não há outra forma de se aprender uma linguagem ou FW novos sem codar. Sugiro você pegar um projeto e construir algo. Isso vai servir de portfólio e aprendizagem. Vuejs possui uma comunidade no Telegram enorme, entra lá e mande suas dúvidas, há uma galera enorme pronta para te responder, pessoas que já passaram por essas dores do aprendizado, mas que conseguiram e hoje até trabalham com Vuejs (meu caso)

Deixo como exemplo o que eu fiz: uma aplicação para a antiga escola em que estudei. Foi o primeiro projeto grande que peguei para desenvolver, e foi uma oportunidade de trabalhar com Vue e Electron. Depois disso, eu tenho mantido um projeto back e front, que é o Debate3D, que está sendo uma outra oportunidade de crescimento profissional. O front-end com Vue está no Github.

Esta foi a apresentação feita pelo Vinicius Reis no primeiro Meetup para Vuejs no Rio de Janeiro, Brasil. Recomendo a você a passar pelos slides e ir anotando as tecnologias citadas e pesquisar. Recomendo também foco, isso é essencial. Saiba aonde quer chegar. Eu aprendi Vuejs para finalizar um TCC de Técnico em Informática. Você pode querer entregar um trabalho para a faculdade (já fiz isso). O importante é ter foco e fazer. Só assim que se aprende.

Dá um pulo lá na comunidade de Vuejs no Telegram!

Temos o fórum oficial do VuejsBR

A lista de comunidades VuejsBR

Por, uma listagem de empresas que utilizam o Vuejs.

Encontrou um texto que pode se encaixar em uma dessas categorias? Encontrou um repositório de um projeto feito com Vuejs e acha interessante? Tem um projeto feito com Vue e gostaria de compartilhar? Manda nos comentários para que outras pessoas tenham acesso ao conteúdo.

Sou Emanuel, desenvolvedor na Decision6, amo tecnologias web, open source e acredito no lema: “to go fast, go alone; to go far, go togheter”. Mais informações sobre mim se encontram no meu site, emanuelgdev.com.br.

--

--