Tutorial Vue.JS? Temos!
Para quem está querendo criar um sistema rápido, robusto e com uma componentização perfeita, Vue.JS é a melhor opção.
Além de ter uma curva de aprendizado extremamente pequena, é um sistema complexo pode ser feito com velocidade e simplicidade.
Vamos lá para o nosso tutorial de Vue.JS! 😉
Vue.JS: o que é?
Não vamos alongar com teorias em cima de teoria, Vue.JS é uma biblioteca JavaScript, suas paginas são divididas em 3 categorias
- HTML;
- Scripts;
- CSS.
Com essa divisão a leitura do código fica muito simples assim como sua manutenção.
>>Leitura recomendada: O que é Vue JS e como funciona?
Chega mais com esse tutorial de Vue.JS! Bora criar um projeto
Uma outra grande vantagem de usar Vue.JS são os inúmeros frameworks disponíveis para auxiliar na criação de suas páginas.
Para esse arquivo vamos usar o Quasar, um framework incrível que vai ajudar a criar sistemas híbridos de forma super fácil!
Com ele podemos nos concentrar mais no desenvolvimento sem ter que nos preocupar tanto com a parte visual da aplicação.
O primeiro passo para iniciar o projeto com Vue.JS e com o Quasar é instalando ambos.
Estou levando em consideração que você já tenha o Node.js instalado em sua máquina.
Instalando o Vue.JS e o Quasar
Se não tiver, é só baixar e instalar antes dos próximos passos!
npm install vue
npm install -g @quasar/cli
Depois de rodar os passos acima, tanto o Vue.JS quanto o Quasar já estão disponíveis para uso.
Como eu já disse nesse tutorial de Vue.JS, usar ele ajuda e muito na velocidade de criação de um sistema.
Assim como o uso de seus frameworks, então em vez de perder tempo criando toda a arquitetura do sistema, vamos deixar o Quasar fazer isso para nós apenas executando o código abaixo.
quasar create nome_do_seu_projeto -b dev
Após rodar o comando acima será feita algumas perguntas para a criação de seu projeto, como nome, autor …, basta preencher de acordo.
Sabe o que é mais incrível?
Sua aplicação já está pronta para o desenvolvimento, agora é só entrar na pasta e rodar o sistema como comando abaixo e vc verá sua aplicação funcionando lisa! 😀
quasar dev
Sabe o mais legal de tudo?
Se você analisar, não gastamos 2 minutos para ter uma aplicação pronta, esse um dos pontos mais fantásticos do Vue.JS.
Estrutura do Código
Ao usar o quasar para a criação do projeto em Vue.JS, toda a arquitetura do sistema já está pronta!
Agora basta entende-lá para começar a brincar, então bora lá.
A primeira parte para onde vamos olhar é para a pastar router.
Dentro dela você encontrará um arquivo chamado routes.js.
Como o nome já diz, esse é o arquivo responsável por criar as rotas da aplicação.
É super simples, você tem um componente, um pedaço de tela, representado como se fosse o “Pai”.
Ou seja, a tela onde todos os outros componentes, as “filhas”, que vc criar, vão ser incluídas.
Pense no componente “Pai” sendo o header da sua aplicação.
Ou seja, toda tela que você criar, basta colocar como estão as filhas indicadas na imagem.
Lembrando que pode ter outros pais.
A partir daí é começar a desenvolver.
Vue.JS tutorial: criando a primeira tela
Vamos criar uma tela e login para nossa aplicação, assim podemos abordar vários tópicos do Vue.JS e você conseguirá continuar a partir daí.
Dentro da pasta pages vamos criar o seguinte arquivo, Login.Vue.
Escrevi o seguinte código para melhor interpretação do HTML, ou seja, a primeira parte da página Vue.JS como mencionado no início do artigo.
A imagem acima do HTML gera o seguinte resultado:
Agora precisamos criar a função para fazer o login e limpar o formulário, para isso vamos para a segunda parte da pagina Vue.JS, que é o script.
Até esse momento não criamos a implementação da função login.
Para deixar esse artigo mais divertido e mais informativos vamos deixar nosso amigo Google nos ajudar com essa função de login?
Firebase
Entra aí mais um amigo como o Quasar: o Firebase.
O Firebase é um conjunto de ferramentas para nos ajudar na criação de aplicações de qualidade.
Vamos usar umas de suas ferramentas que é o auth, ou seja, o cara responsável em fazer nosso autenticação.
Para isso vocês precisam ir no Google para criar uma conta no Firebase, é grátis. Depois crie um projeto!
Quando você acabar de criar seu projeto, que basicamente next next next, eles vão te dar um conjunto de credenciais, dessa forma:
Copie essas credenciais porque vamos precisar delas na nossa aplicação. Dentro do seu projeto no firebase click em Authentication e ative o método de login pro Email/Senha
Criei um Usuário de teste qualquer.
Perfeito, podemos voltar agora ao código e terminar nosso formulário de login.
Precisamos instalar o firebase no projeto, para isso digite npm install firebase.
Agora com o Firebase instalado, vamos configurar ele na nossa aplicação.
Olha como pode ser bem simples também:
Terminando o Formulário:
Temos, por fim, uma aplicação com uma arquitetura bem montada de forma automática, um visual clean com o quasar e uma autenticação com firebase do google 100% segura.
Viu como esse tutorial de Vue.JS é fácil?
Tanto sua implementação como de seus frameworks.
Simples? Talvez. Robusto? Muito.
Se aplica a grandes aplicações? É claro que sim.
Se quiser, você pode acessar este projeto no GitHub.
Agora é hora de entrar de cabeça para se aprofundar nessa maravilha.
