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.

E a documentação oficial?

A documentação oficial que inclusive está em português pode ser lida antes desse curso. Lá você você verá diversas funcionalidades do Vue, só que funcionando em modo desconexo. Vários exemplos da documentação oficial usam o Vue através da sua própria instância, como por exemplo:

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

O que pode ser confuso para quem está iniciando, e deseja ver um exemplo real em funcionamento. A minha dica é, use a documentação oficial para resolver pequenas dúvidas ou reler alguns dos conceitos do Vue.

Este mini curso visa suprir essa deficiência da documentação oficial, no qual queremos ver um exemplo real em funcionamento.

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.

E o backend?

Nesse mini curso estaremos usando um backend genérico que eu mesmo criei e está localizado em http://northwind.now.sh/. Neste back poderemos fazer operações Rest, das quais destacamos:

Método URI Entrada Saída
GET /api/categories void Array contendo todas as categorias
GET /api/categories/:id id Uma categoria

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 npm, que é o gerenciador de pacotes do node.

O npm funciona da seguinte forma:

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.

Para melhorar a integração do VScode com o Vue, abra as configurações do VSCode (Arquivo > Preferências > Confgurações ) e adicione a seguinte configuração:

{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ]
}

Instlalando o vue-cli

O vue-cli é a melhor forma de criar um projeto base totalmente funcional. Para instalar o vue-cli, faça:

$ npm install -g @vue/cli

A diretiva -g irá configurar o vue-cli como global, assim você pode usar o comando em qualquer diretório.

Criando o projeto Vue

Com o terminal aberto, pode-se crie o projeto vue da seguinte forma:

& vue create myapp

Após digitar este comando, surge a pergunta do tipo de projeto que queremos criar. Vamos escolher “Manually select features” para escolher as bibliotecas mais importantes:

Das bibliotecas disponíveis, vamos selecionar: Babel, Router e Linter, conforme a figura a seguir:

Para todas as outras opções, deixe a padrão. O projeto é criado, e já podemos abrí-lo no VSCode da seguinte forma:

$ cd myapp
$ code .

Com o VSCode aberto, temos algo parecido com:

Conhecendo os arquivos principais do projeto

A seguir vamos comentar alguns arquivos que fazem parte do projeto.

package.json Contém as configurações do projeto, como o seu nome, versão, os pacotes node que estão instalados e as rotinas para serem executadas quando você deseja, por exemplo, compilar (build) o seu projeto.

src/main.js Podemos considerar este o arquivo inicial do projeto, o que configura o Vue e algumas bibliotecas. Se você abrí-lo no VSCode, verá que ele “carrega” o arquivo App.vue.

src/App.vue Este é o primeiro componente Vue a ser carregado. Ele pode ser compreendido como toda a aplicação Vue na tela, sendo que demais componentes serão carregados “dentro” do App.vue. Veremos mais detalhes sobre isso.

src/router.js Define as rotas da aplicação, isto é, quando mudamos a url do navegador qual componente deve ser carregado. Na aplicação recém criada temos a url “/” que carrega o componente Home, e a url /about que carrega o componente About.

src/views/About.vue As “views” são componentes que o router carrega e adiciona na aplicação. Você pode pensar na view como uma página, onde cada página é carregada pelo router.

src/components/homeworld.vue Um componente pode ser definido como algo visual que será reaproveitado em diversas partes do seu projeto. Suponha que você crie um componente de upload de arquivos, e deseja usá-lo em 3 lugares diferentes. Então você deve criar este componente no diretório components. Neste mini curso não iremos focar muito na criação de componentes, apenas na criação de views.

Executando o seu projeto no modo “dev”

Para executar o projeto Vue, faça o seguinte comando no terminal:

$ npm run serve

O projeto será compilado, e terá como resposta algo como:

Acesse http://localhost:8080/#/ para ver o Vue em ação. Você verá algo como:

Como teste, abra o arquivo src/views/Home.vue e altere a mensagem de boas vindas para “Bem vindo a sua aplicação Vue”. Quando salvar o arquivo, verá que a aplicação foi recompilada e a página no navegador atualizada.

Compreendendo melhor o router

Em breve!

Comentários

O curso ainda está no começo, mas você pode dizer aí em baixo o que gostaria de ver nele!