Vue3: explorando o framework

Iniciando o Alura Tracker - Apresentação

Olá. Meu nome é Vinicios Neves e eu vou te acompanhar nesse curso sobre Vue.js com TypeScript.

Durante o decorrer do curso nós vamos desenvolver o Alura Tracker, uma aplicação que ficará responsável por fazer o tracking, o acompanhamento de tarefas diárias que executamos no dia a dia, como, por exemplo, estudar Vue.JS

Conseguimos iniciar uma tarefa, o cronômetro vai começar a correr e quando finalizarmos ele vai começar a preencher uma lista.

Inclusive, podemos fazer várias tarefas e ele vai incrementando essa lista de tarefas executadas, cada uma com o tempo indicado.

Vamos utilizar nesse curso o próprio Vue na versão 3, que é um framework progressivo que vai nos ajudar em muitos aspectos, para facilitar o nosso dia a dia enquanto desenvolvedores.

E também vamos usar o TypeScript. Então vamos juntar o poder desses dois camaradas e conseguir inferir tipo, trabalhar de uma forma diferente com o componente Vue do que fazíamos na versão 2.

Vamos desenvolver essa aplicação. E no final ela estará publicada para você poder postar nos fóruns e compartilhar com todo mundo o que você desenvolveu.

Iniciando o Alura Tracker - Iniciando o projeto

Durante o curso nós vamos desenvolver o Alura Tracker, essa aplicação que vai calcular o tempo gasto em cada tarefa. Então ele vai fazer o tracking, vai calcular o tempo que levamos em cada tarefa executada.

Começar um projeto Vue requer uma série de configurações. E já pensando nisso, o Vue nos disponibiliza o CLI.

Para instalarmos esse CLI, essa forma de criar novos projetos, precisamos já estar com o Node instalado, que está disponível no passo a passo do preparando o ambiente. E uma vez com o Node instalado podemos pedir para o NPM deixar disponível para nós.

O -g significa de forma global, ou seja, depois que instalamos podemos solicitar comandos diretamente a partir do terminal chamando direto o comando Vue.

Então vamos começar. Vou copiar esse comando npm install -g @vue/cli, entrar no meu terminal e pedir para ele instalar para mim o CLI.

A única diferença é que eu preciso ter uma permissão especial, sudo no meu caso específico, porque estou usando o terminal do Mac. Então preciso do sudo npm install -g @vue/cli e ele vai instalar para mim o CLI. Esse processo demora um pouco. Quando terminar, já poderemos começar o nosso projeto.

Com o nosso CLI instalado, já podemos criar o nosso projeto. Para isso chamamos vue create alura-tracker e conforme pedimos para o Vue criar o projeto novo, vamos selecionar manualmente o que queremos utilizar.

Vamos marcar o TypeScript. Basta você navegar com as setas e apertar a tecla de espaço. Vou dar um “Enter” para ir para o próximo. Nós vamos utilizar a versão 3.x e não vamos utilizar componentes baseados em classe.

Nós vamos utilizar o Babel para fazer a transpilação de código para nós. E a parte de Lint vamos deixar só com prevenção de erros e Lint on save com arquivos dedicados e não vamos salvar tudo isso para projetos futuros.

Vamos recapitular: nós selecionamos manualmente, adicionamos o TypeScript, selecionamos a versão 3, não vamos utilizar componentes baseados em classe, vamos utilizar o Babel junto com o TypeScript.

A parte de Linter e formatação deixamos de forma básica, fazendo o Lint na hora de salvar o arquivo e salvando todas essas configurações em arquivos dedicados.

E por último, não vamos definir essas configurações para projetos futuros. Vou pressionar “Enter”. Ele vai seguir fazendo a instalação.

Mais uma vez, como ele vai baixar todas as dependências e tudo que precisamos, pode demorar mais um pouco também. Assim que ele terminar, teremos o projeto pronto para começarmos a programar os nossos componentes.

Ele já instalou, baixou todas as dependências. Agora já podemos entrar na pasta, que no caso eu chamei de “alura-tracker”. E ele já diz qual comando é necessário para fazer essa aplicação rodar: npm run serve.

Ele vai executar um servidor para utilizarmos em tempo de desenvolvimento. Quando ele terminar de subir já conseguiremos ver um projeto iniciado.

Vou abrir o URL. E já temos uma página de boas vindas dizendo que estamos utilizando o Vue.js com o TypeScript. Eu vou no meu Visual Studio Code e pedir para ele abrir para mim a pasta “alura-tracker”. E repare que a nossa estrutura do projeto já está toda disponível para utilizarmos.

Ele já nos disponibiliza com o TypeScript, está importando aquele componente HelloWorld, que traz todas aquelas informações para nós.

E se dermos uma olhada no “package.json” ele já vai nos trazer todas as dependências que nós temos para começar a programar.

Então temos a dependência do Core e do próprio Vue, e algumas dependências em tempo de desenvolvimento, a maioria delas relacionada a TypeScript, Lint e tudo que precisamos só enquanto estamos desenvolvendo.

Agora que já temos o CLI instalado e já iniciamos o projeto, estamos prontos para começar a escrever os nossos componentes. Como já dizia o mestre "bem começado, metade feita". Vamos começar a escrever alguns componentes em Vue.

Iniciando o Alura Tracker - CSS externo e componentes

Vamos agora adicionar as dependências que vamos utilizar durante o desenvolvimento da aplicação, que são duas.

A primeira é o framework Bulma. Ele vai nos disponibilizar vários componentes, layout em colunas, que é o que vamos utilizar para dividir a nossa página.

Então para adicionar o Bulma podemos entrar no site bulma.io, em “Documentação > Overview > Start” e temos um link para importar. Vou copiar esse link e colar dentro do nosso “index.html”, logo abaixo do title. E temos o Bulma CSS disponível para nós.

Não é o foco do curso, você pode dar uma olhada na documentação para entender como funcionam os componentes que vamos utilizar. Mas como não é o foco eu não falarei dele, mas posso citar uma classe ou outra quando estivermos programando.

A segunda dependência é o Font Awesome, que tem vários ícones legais para utilizar. Precisamos de um de play e stop e um ícone que representa um relógio. E precisamos instalar este pacote @fortawesome/fontawesome-free. Então no terminal vamos fazer npm i --save-dev @fortawesome/fontawesome-free e com isso ele vai ficar disponível para nós.

Enquanto ele instala eu vou pegar o import do CSS. Vou dar um “Ctrl + C” e vamos no “main.ts” fazer um import do CSS do Font Awesome: import ‘@fortawesome/fontawesome-free/css/all.css’. E agora teremos todos os ícones disponíveis para nós.

E agora já podemos finalmente partir para o nosso App e começar a dividir os nossos componentes. Eu vou tirar o import e o CSS base. Agora está tudo limpo. Vamos começar a dividir a nossa aplicação. Vamos envolver todo o nosso HTML numa tag main, que representa o conteúdo principal da aplicação.

Queremos que essa tag main encapsule e faça o layout de colunas de toda a nossa aplicação. Então vou pegar as classes do Bulma que vamos precisar class “columns is-gapless is-multiline”.

O columns indica que dentro teremos várias colunas e o is-gapless indica que o espaçamento entre essas colunas não existe. E por fim, o is-multiline indica que ele pode permitir múltiplas linhas.

Então agora basta dividirmos em duas porções. A primeira porção é onde terá a nossa barra lateral. Vamos adicionar duas classes: eu quero que ela seja uma coluna e que o tamanho seja de um quarto do tamanho disponível.

E tenho outra div que vai representar toda a parte da direita que tem um formulário no topo, e as listas de tarefas embaixo. Só que esse segundo quadrante terá três quartos de tamanho.

E agora queremos criar um componente nosso. Na pasta de componentes podemos deletar o HelloWorld, porque não vamos mais usá-lo e criar um novo arquivo chamado “BarraLateral.vue”.

O nosso componente Vue sempre será dividido em até três porções. A primeira parte é o HTML, que é o template. A segunda parte é o JavaScript, lembrando que no nosso caso estamos usando o TypeScript, então colocamos lang=”ts”. E por último, temos uma tag chamada style, em que vai todo o estilo do componente.

Então na nossa barra lateral precisamos dividir e começar a criar pelo header. Ele é o título da aplicação.

O H1 vai ser o título principal da página. Só que teremos uma peculiaridade: o nosso H1 será uma imagem. E precisamos substituir essa imagem. Precisamos tirar o logo do Vue e fazer o download do nosso Alura Tracker.

Eu já fiz o download. O link estará disponível numa atividade da plataforma para vocês. E eu vou só sobrescrever e mandar substituir. Agora o meu logo é o do Alura Tracker.

Agora com o logo disponível, como eu faço para a minha barra lateral acessar esse logo que está dentro da pasta “assets”? Eu posso fazer um caminho relativo. Se eu estou dentro da pasta de componentes eu tenho que voltar um nível, entrar em “assets” e achar o arquivo.

Então para isso fazemos ”../assets/logo.png”. Agora vamos adicionar um pouco de estilo. Eu vou pegar também já pronto para não precisarmos gastar muito tempo digitando o CSS.

header {
  padding: 1rem;
  background: #0d3b66;
  width: 100%;
  height: 100vh;
}
@media only screen and (max-width: 768px) {
  header {
    padding: 2.5rem;
    height: auto;
  }
}

Então o que precisamos é essa porção, então são duas coisas que vamos adicionar.

No nosso header adicionamos uma cor de fundo, com o tamanho máximo disponível para ele. Repare que ele já estará disponível dentro de uma coluna. A largura vamos deixar como toda a largura da tela.

E no caso do mobile queremos que ele tenha uma altura automática ao invés de preencher tudo, para conseguirmos colocar uma parte da aplicação embaixo da outra.

E a última parte que precisamos definir é exportar a função que define este componente. Então primeiro vamos fazer o import da função: import { defineComponent } from ‘vue’.

E agora sim já estamos prontos para fazer o export: export default defineComponent. O “defineComponent” vai receber um objeto de configuração, e inicialmente só vamos dizer o nome desse componente: name: ‘BarraLateral’.

Então criamos o nosso componente. Mas precisamos de alguma forma colocá-lo disponível. Vamos chamar o <BarraLateral />. Nós queremos que esse componente seja renderizado. Vamos salvar e ver se isso funciona.

Agora vou na minha aplicação da Alura Tracker. Repare que está tudo em branco. Temos a barra lateral, que não tem nada.

Precisamos, de alguma forma, dizer para o Vue que o componente App terá acesso ao componente da barra lateral. Então vamos fazer import BarraLateral from ‘./components/BarraLateral.vue’.

Além disso, precisamos adicionar na propriedade que tem o espaço de configuração para o “defineComponent”, que é justamente componentes. Ou seja, são os componentes relacionados a esse componente. Estamos compondo componentes com outros componentes. E vamos passar a barra lateral.

Eu vou salvar e vamos dar uma olhada agora para ver se isso funciona. Agora sim ele já está disponível para nós. A única coisa que está faltando é definirmos o restante da aplicação, que é o nosso formulário e a nossa lista de tarefas.

Nossa barra lateral já está pronta, e ficou faltando só adicionar um pequeno padding interno. Então no nosso header vamos fazer padding: 1rem. E vamos voltar para a aplicação. Agora sim, podemos seguir para o formulário.

Vamos criar o nosso novo componente, chamado “Formulario.vue”. Já sabemos que a primeira porção é responsável pelo template, pelo layout, o nosso código HMTL. E vamos usar um componente do Bulma chamado “box”, então vou criar uma div com a classe box, <div class=“box”>.

Dentro desse box precisaremos dividir de novo o layout em colunas. Então vamos colocar <div class=”columns”>.

Na primeira coluna precisaremos de um put, então <div class=”columns”>. E em seguida, <div class=”column is-8”>, que é uma outra forma de dividir o tamanho. E queremos que essa porção seja o correspondente a 8 colunas.

Como essa div vai ter comportamento de formulário, vamos adicionar uma role, que vai ser form, role=”form”. Além disso, precisamos também do aria-label. E dentro vamos descrever o que essa div representa, que é aria-label=“Formulário para criação de uma nova tarefa”.

O que precisamos agora é de um input: <input type”text” class=”input” placeholder=”Qual tarefa você deseja iniciar?”>.

Agora, logo ao lado teremos uma outra coluna. Só vou pedir para ele dar uma formatada no código. A outra coluna vamos começar também com <div class=”column”>. E teremos a parte responsável por aquele contador que vimos nas primeiras aulas. Ele vai ter um tempo, com horas, minutos e segundos, depois vai ter um play e um pause.

Vamos começar pelo tempo. No início ainda não temos comportamento, então vamos adicionar uma section do nosso contador e vamos colocar dentro de um Strong para ficar mais chamativo: <strong>00:00:00</strong>.

E precisamos agora dos botões de play e de pause. Vou copiar para não precisarmos ficar digitando esse monte de código HTML e vou pedir para ele formatar para mim.

<button class="button">
            <span class="icon">
                <i class="fas fa-play"></i>
            </span>
            <span>play</span>
        </button>
        <button class="button">
            <span class="icon">
                <i class="fas fa-stop"></i>
            </span>
            <span>stop</span>
        </button>

Teremos uma section com o tempo gasto, um button com um ícone dentro. Repara que essas são as classes do Bulma. E depois outro button com outro ícone dentro, de play e stop.

Vamos salvar e importar no nosso “App.vue”. Antes disso precisamos exportar. Então vou abrir a tag script e colocar <script lang=”ts”>.

E vamos fazer import { defineComponent } from ‘vue’. E depois export default defineComponent({}) essa é uma função que recebe um objeto de configuração.

E aqui podemos começar pelo nome: name: ‘Formulário’, que é nosso componente responsável pelo formulário. Vamos salvar e agora sim entrar no nosso “App.vue”. E já sabemos como importar nosso formulário. Então só vou aqui, digitar de uma vez só, BarraLateral não mais, quero agora Formulario.

Importamos o formulário, definimos como um componente. E podemos finalmente adicionar um formulário. Vamos salvar e dar uma olhada para ver como ficou.

Ele está do jeito que esperávamos. Só ficou faltando dar uma organizada interna no nosso componente. Vou pegar as classes da Bulma que quero que fiquem lado a lado.

No meu formulário vou arrumar para ficar tudo lado a lado. Vou colocar isso dentro de uma div. Vou adicionar as classes do Bulma. Basicamente eu estou dizendo que quero display flex, quero alinhar os itens no centro com espaçamento entre eles.

Agora posso pegar o que está abaixo e jogar dentro dessa div. E vou pedir para ele formatar, formatou e vou salvar.

Agora está do jeito que gostaríamos. Já temos um formulário em que podemos colocar uma tarefa “Iniciar os estudos em Vue.js”, por exemplo.

Só que os nossos botões ainda não têm comportamento. Está na hora de colocarmos esse cronômetro para funcionar.

Sobre o curso Vue3: explorando o framework

O curso Vue3: explorando o framework possui 117 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de VueJS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando o Alura Tracker
• Compondo componentes
• Trabalhando com listas
• Estilos estilosos
• Compilando a aplicação