Mini curso Vue.js | Um mini curso gratuito sobre Vue
Mini curso Vue.js
Um mini curso gratuito sobre Vue
Conhecendo o Node, npx e npm
Instalando e Configurando o Visual Studio Code
Instlalando o vue-cli
Executando o seu projeto no modo "dev"
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.
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:
Este mini curso visa suprir essa deficiência da documentação oficial, no qual queremos ver um exemplo real em funcionamento.
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 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.
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.
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:
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çao 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.
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.
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:
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:
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.
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.
Onde o router é configurado? Ele fica especificamente no src/router.js. Lá você encontrará duas rotas. A primeira, usa o caminho "/" e aponta para o componente Home. Isso é, quando a url for "/", carregue o componente "Home". A segunda rota usa o caminho /about e liga ao componente "About". Criar novas rotas é criar mais uma entrada nessa lista, relacionando o caminho e o componente.
Como eu "chamo" uma rota/componente? A resposta está no próprio arquivo App.vue, onde você tem a tag router-link com o atributo "to". Ao clicar nesse link, o router pega o caminho especificado, procura em sua lista de rotas, e carrega o componente no router-view.
Uma das primeiras tarefas a serem realizadas após a instalação do projeto Vue é preparar o acesso do framework ao backend. Existem centenas de formas de se fazer isso, vou utilizar uma que está presente em quase todos os meus projetos. Quando eu penso em "acesso do frontend ao backend" gosto de pensar como um "service", um conjuto de classes que proveem acesso ao servidor.
Todos estes serviços podem estar no diretório src/services que iremos criar. Lembre-se que, pensou em acesso ao backend, o código para isso está no "services".
baseURL: "https://northwind.now.sh/api",
Em import axios from 'axios', importamos a biblioteca "axios" diretamente do diretório node_modules. O compilador vai ser inteligente o suficiente para saber procurar a bibliota neste diretório.
Criamos a constante http, e ela é uma instância direta da biblioteca axios. O método create é usado para que possamos informar alguns parâmetros extras. Se você conhece o pattern Factory, vai se identificar aqui.
Os parâmetros, a princípio, são apenas 3. O baseURL é o mais importante, ele "aponta" para a url do nosso servidor backend (se você sentiu falta do uso de enviroments aqui, releve. Esse é um curso de principiantes). O parâmetro timeout fala por si só, e o parâmetro headers está relacionado ao cabeçalho da requisição http que será feita ao backend. Neste caso, estaremos sempre repassando o parâmetro Content-Type com o valor application/json. Aqui usamos Json que será a nossa forma de comunicação padrão.
Finalmente temos o uso do export default http. Essa assinatura exporta a constante http para ser utilizada em outros arquivos javascript.
Após configurar o Axios, ou seja, criar a classe http.js no diretório src/services, podemos criar uma classe que será responsável em acessar as informações sobre "categorias". O que vamos fazer, basciamente, é criar um service chamado "categories" com as seguintes funcionalidades:
import  categories from '../services/categories';
Perceba que estamos importando categories através de um caminho absoluto. Ou seja, se estamos no diretorio components, temos que subir um nível e acessar o diretório services. Para facilitar esse processo, pode-se utilizar um alias já criado pelo Vue chamado "@", que aponta diretamente para o diretório src. Então, a chamada ao service pode ser: import categories from '@/services/categories';
Perceba que chamamos o método "getAll" diretamente do service. O que vem depois já é novidade. Se você não reconhece o .then, ele está relacionado a Promises, um conceito do Javascript. É preciso saber que qualquer chamada do frontend ao backend é assíncrono, ou seja, algo como:
É algo totalmente errado no "mundo" javascript. Só podemos "ler" o resultado do acesso ao backend quando isso for possível (pode demorar alguns segundos), e esse "retorno" é feito através de Promises. Basicamente, o método then será executado somente quando o backend retornar, e o resultado deste retorno é armazando na variável result, que pode ser lida pelo comando console.log.