Introdução

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!'
  }
})
1
2
3
4
5
6

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 curso estaremos usando um backend genérico que eu mesmo criei e está localizado em http://northwind.now.sh/. Neste backend 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:

  • Git Imprescindível no desenvolvimento de hoje, o Git é usado para manter o controle de versão dos arquivos. Ele não é um requisito para que o Vue funcione, mas é uma ótima ideia ter o Git instalado e poder versionar os seus arquivos de projeto.

  • Node Acesse https://nodejs.org/en/ e instale o Node versão 8 ou superior. Para ambientes Linux baseado no Debian, pode-se fazer sudo apt-get install nodejs, mas tenha certeza que está na versão 8! Para saber a versão do node, execute node -v no terminal.

  • Visual Studio Code Esta é definitivamente a melhor IDE gratuita para o desenvolvimento Vue. O "VSCode" vem se destacando no mercado no desenvolvimento html/javascript/css e, com a devida configuração, é perfeitamente compatível com o Vue.

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
1

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:

  • Editorconfig
  • ESLInt
  • vue
  • vetur
  • vue peek
  • vue 2 Snippets

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 > Configuraçõ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
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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
1

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