Vue.js - 101 (introdução)
Ou: uma declaração de amor ao Vue.js
Olá, leitora ou leitor
Não sei se você é assim, mas de vez em quando eu me apaixono por alguma tecnologia, um framework, uma linguagem de programação, uma ferramenta.
Foi assim com o Laravel, com o Docker, com as pipelines CI/CD no Git Lab e com o Vue.js
Confesso que ultimamente tenho traído meu querido Vue.js com o React.js mas nunca vou deixar de lado a primeira paixão.
Então para me redimir com meu amado Vue.js, relembrar e me preparar para a certificação, resolvi escrever esta série de tutoriais do Vue.js.
Nesta série de posts vou escrever um tutorial com o básico do Vue.js, incluindo o contéudo necessário para prova de certificação do Vue.js.
O conteúdo desta série foi retirado da documentação do Vue.js (este é o link Vue.js Guide) mas aqui esta resumido e direto ao ponto o que mais você precisa saber para trabalhar com o Vue.js e também para se preaparar para a prova de certificação.
Mas antes deixa eu fazer um disclaimer aqui!
Disclaimer
Este texto faz referência a sites, informações, produtos e/ou serviços que são controlados por outras pessoas e que foram mencionados com o único objetivo de informar e instruir a você leitor, sendo que não recebi nenhum valor monetário ao citar estes produtos e não me responsabilizo pela correção, funcionamento ou descontinuação das informações, serviços e produtos citados neste texto.
Para começar
Para acompanhar este tutorial de Vue.js você vai precisar de alguns softwares instalados em seu computador: run-time do Javascript; um editor de código e um gerenciador de versionamento de código.
Se você já desenvolve software provavelmente você já tem estas ferramentas. Minha sugestão é que você instale:
Os links acima são os softwares que gosto mais de usar. Fique à vontade se você quiser usar outros de que você goste mais.
Windows, Linux ou Mac ?
Sou usuário do Windão desde sempre, então esta série de tutorias do Vue.js está sendo escrita e testada em uma máquina com Windows.
Para os comandos da CLI estou usando o Git Bash, que é instalado no pacote do Git indicado acima, como interpretador de linhas de comando.
Se você é usuário do Linux ou do Mac, por favor continue lendo o post, pois todos os comandos que eu mencionar aqui também podem ser executados no seu sistema sem alterações.
Instalação
Existem algumas opções para criar uma aplicação Vue.js, a primeira e mais comum é gerar um esqueleto da aplicação que vai ser usado como base para criar nosso próprio aplicativo.
De acordo com a documentação o comando para criar o esqueleto, chamado de scaffolding, é o seguinte :
npm create vue@latestSe você desenvolve em uma máquina com o sistema Linux ou o Mac, basta exeutar o comando acima.
Neste tutorial estou usando o Git Bash em um computador com o sistema Windows, e por este motivo o comando será um pouco diferente e é o seguinte:
winpty npm.cmd create vue@latestEm seguida aceite todos os defaults pressionado enter para todas as perguntas do programa instalador.
Após isso digite os seguintes comandos:
cd vue-project
npm install
npm run dev
Após o último comando abra uma nova aba e digite a url: http://localhost:5173/ na barra de navegação no seu navegador. Será exibida na janela no browser o logotipo do Vue.js e a frase: You did it !.
Vite
O Vite é uma ferramenta de build criada pelo Ewan You, o mesmo criador do Vue.js. O Vite trabalha com o conceito de templates e, além do Vue.js, pode ser usado para criar um scaffolding de aplicação Java Script ou Type Script para vários frameworks, entre eles: React.js e Svelte.
Alem disso, existem outros templates criados e mantidos pela comunidade de usuários do Vite que permitem criar projetos contendo outros utilitários e frameworks, com por exemplo: TailwindCSS, Electron, Ionic e outros.
O grande diferencial do Vite é a velocidade com que ele gera um esqueleto para a aplicação. Para testar execute o comando:
npm create vite@latest my-vue-app -- --template vueCom muita rapidez será criado o scaffolding da aplicação e você poderá digitar o restante dos comandos para rodar o aplicativo exemplo do Vue.js conforme o templte do Vite. Para isso digite os comandos:
cd my-vue-app
npm install
npm run dev
Após o último comando abra uma nova aba e digite a url: http://localhost:5173/ na barra de navegação no seu navegador. Será exibida na janela no browser o logotipo do Vue.js, frase: Vite + Vue e um contador com o valor Count 0 que vai sendo incrementado cada vez que você clica nele.
CDN
Se você não quiser instalar o Vue.js também é possível utilizar framework a partir de uma CDN (rede de distribuição de conteúdo).
Esta abordagem é muito mais rápida porque não necessita das etapas de instalação e de build. Os casos em que ela é mais útil é quando você quer implementar reatividade em uma pagina HTML estática, ou fazer a integração do Vue.js com um framework de backend já instalado.
Fique alerta, porém que utilzando o Vue.js a partir de uma CDN não será possível utilizar a sintaxe Single-File Component (SFC), ou seja, você não poderá encapsular o template, a lógica e o CSS de um componente Vue em um único arquivo .
Nesta série de tutoriais não vou abordar em detalhes este caso de uso do Vue.js a partir de uma CDN. Estou mencionando aqui apenas porque é um assunto que pode ser cobrado na prova de certificação.
Para um exemplo prático: abra o editor de código VSCode; crie um novo arquivo com o nome de index.html. Em seguida digite:
htmlAssim que você começar a digitar o VSCode exibe uma série de opções de autocomplete, escolha a opção: html:5
O editor VSCode vai gerar um template de página HTML vamos agora ativar o Vue.js nesta página a partir de uma CDN.
Para isso na seção HEAD logo acima da tag de título insira a seguinte linha:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Seu arquivo index.html vai ficar mais ou menos assim:
...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
</head>
...Para completar o exemplo copie e cole o código abaixo na seção BODY do seu arquivo:
<div id="app">
<p>{{count}}</p>
<button @click="increment">Incrementar</button>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const count = ref(0)
function increment() {
count.value ++
}
return {
increment,
count
}
}
}).mount('#app')
</script>
Salve o arquivo e depois abra com um browser. Se tudo deu certo você verá um botão e um contador e ao clicar no botão o contador vai ser incrementado.
Por equanto é só, não perca o próximo post onde vou falar sobre:
- Vue,js e SPA
- Reatividade no Vue.js
