Sumário

Sobre este curso

Este mini curso tem como objetivo introduzir o Framework Javascript Vue.js para o desenvolvimento de aplicações que chamamos de SPA - Single Page Applications, isto é, aplicações de página única. Este conceito é o inverso dos sistemas Web mais comuns onde cada funcionalidade é uma página ou uma requisição que contém uma página completa. No desenvolvimento atual, existe uma separação muito clara entre frontend e backend, e o Vue.js entra no papel de framework frontend.

Porque existe a separação entre frontend e backend?

O desenvolvimento de sistemas vem passando ao longo dos últimos anos uma mudança significativa, motivada principalmente pela entrada dos dispositivos mobile como principal meio de uso e acesso aos sistemas. Antigamente, um sistema poderia ser 100% web e estaria atendendo aos requisitos básicos do cliente, mas hoje em dia o sistema deve ser capaz de ser web e mobile, independente do tipo de dispositivo mobile.

A comunicação entre frontend e backend é realizada através de RESTfull. Basicamente, o frontend acessa o backend via ajax, e o backend responde com algum dado no formato Json.

O que é Vue.js?

O Vue (a mesma pronúncia de view no inglês, isto é, víu) é um framework javascript que “cuida” de toda a parte do desenvolvimento frontend. Através dele será possível criar todas as telas de um sistema, contendo formulários, campos, tabelas, abas, etc. Além disso, existem diversas bibliotecas para o Vue que maximizam as suas funcionalidades. O Vue é um concorrente direto de outros dois frameworks, Angular e React. Estes 3 frameworks hoje em dia estão entre os prediletos para o desenvolvimento frontend.

O Vue exige um pouco de conhecimento em HTML, JavaScript e CSS, que são as três bases do desenvolvimento web, mas não é obrigatório que você seja um expert para poder continuar o curso. Será um “passeio no parque” se você já conhece bem Javascript e está familiarizado com ES2016.

Se você começar a estudar o Vue pela documentação oficial (que aliás é ótima, e em português), verá coisas do tipo:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Nosso curso aborda o Vue de uma forma diferente da documentação oficial, de forma a prepará-lo para o “mundo real”, usando o que há de melhor no framework. Isso significa que, quando começarmos a aprender Vue, estaremos usando um template pronto com vários arquivos prontos, tudo funcionando de forma sincronizada para que se possa obter o máximo de proveito do Vue. Para chegarmos nesse ponto, precisamos primeiro preparar o nosso ambiente de desenvolvimento.

Preparando o ambiente

O Vue precisa de muito pouco para que possamos iniciar o seu estudo:

Conhecendo o Node, npx e npm

Após instalar o Node em seu ambiente, podemos executá-lo através da linha de comando. Basta digitar node e entrar no modo interativo. Mas para nós desenvolvedores, o Node possui uma ferramenta muito útil chamada npx, que é uma espécie de “executador” de pacotes do node. Um pacote do node é um programa que executa as mais variadas funcionalidades. Para se ter um exemplo, após o node instalado digite o seguinte comando:

$ npx cowsay Vuuuuuuue

O Npx vai executar o programa cowsay que é um pacote do Node, e exibir o seu resultado:

__________
< Vuuuuuue >
 ----------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

O npx já vem “de fábrica” com a instalação do Node na versão 8 ou superior.

Além do npx temos também o npm, que é o *Node Package Manager`, usado para instalar bibliotecas adicionais ao projeto. A instalação de uma biblioteca é realizada através do seguinte comando:

npm install <nomedabibliioteca> --save

A diretiva --save faz com que a biblioteca seja “salva” no projeto em que estamos trabalhando. Essas informações são salvas no arquivo package.json, no qual o examinaremos melhor assim que criarmos um projeto Vue.

Instalando e Configurando o Visual Studio Code

Instale o VSCode e, após a instalação, navegue até a aba de extensões:

Ao clicar nesta aba, você poderá procurar e instalar centenas de extensões para customizar o seu VSCode. No nosso caso, estaremos instalando as extensões para que o Vue seja reconhecido pela ide. As extensões que você deve instalar são:

Após instalar todas estas extensões, reinicie o VSCode.

Comentários

O curso ainda está no começo, mas você pode dizer aí em baixo o que gostaria de ver nele! A ideia básica é detalhar toda a construção da aplicação https://vuewind.now.sh/