O VueJS é um framework progressivo JavaScript para construir interface de usuário. Desde sua origem, foi desenhado para ser facilmente integrado a sistemas antigos, com foco apenas na camada de view. No entanto, quando integrado com outras bibliotecas, é perfeitamente capaz de se desenvolver em SPAs (Aplicações de Página Singular).

No Guia disponibilizado no site do VueJS em PT-BR, podemos estudar alguns exemplos e verificar a potência que o framework nos apresenta.

Instalação

Esse guia segue do pressuposto que você usa um belíssimo Linux Ubuntu. :kissing_heart:

Instalando o Node

Antes de tudo, precisamos certificar que temos o Node instalado, e para isso, precisamos do Node Version Manager, ou NVM para os íntimos.

  $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

Obs.: Se você não tiver o cUrl instalado, só rodar os seguintes comandos:

  $ sudo apt update && sudo apt upgrade
  $ sudo apt install curl

Com o NVM instalado, podemos instalar a versão mais recente no Node assim:

  $ nvm install node

E para ter certeza que tudo está nos conformes, vamos garantir que está devidamente instalado rodando:

  $ node –version

E o retorno deve ser algo como:

  v14.13.0

Para gerenciar as dependências do nosso projeto, vamos usar o NPM, ou Node Package Manager, e faremos isso com o seguinte comando:

  $ sudo apt install npm

E pronto, temos tudo ajustado para instalar e rodar nosso querido Vue.

Instalando o Vue

Agora sim, para instalar a nossa ferramenta de trabalho para esse guia, o astro da noite, vamos rodar o comando:

  $ npm install -g @vue/cli

Obs.: o -g significa que será instalado globalmente no seu sistema, independente de qualquer projeto futuro e outros frameworks.

Vamos conferir se tudo foi instalado corretamente:

  vue –version

E o retorno deve ser parecido com:

  @vue/cli 4.4.6

Ferramentas para tunar sua aplicação

Como dito anteriormente, o Vue se torna um framework muito poderoso quando combinado com algumas bibliotecas externas, dentre elas:

Vue Router

É a biblioteca que faz com que o Vue se torne uma aplicação SPA com a melhor experiência do usuário. Com mudança de rotas sem tirar a página da frente do usuário, consegue dar uma experiência fluida e elegante.

Para configurar o Vue Router no seu site, basta adicionar as seguintes linhas de código no arquivo de configuração de todas do Vue:

// src/routes/index.js

import Vue from ‘vue’;
import Router from ‘vue-router’;

Vue.use(Router);

Nesse trecho, estamos importando no arquivo as bibliotecas do Vue, e do Vue Router, e dizendo para o Vue incorporar as funcionalidades que o Vue Router traz.

Para declarar nossas rotas então, podemos fazer da seguinte forma:

const routes = new Router({
  routes: [
    {
      path: ‘/registrar’,
      name: ‘register’,
      component: () => import(‘@/views/Register.vue’),
      meta: {
        needToolbar: true,
        icon: ‘mdi-arrow-left’,
      },
    },
    {
      path: ‘/login’,
      name: ‘login’,
      component: () => import(‘@/views/Login.vue’),
      meta: {
        icon: ‘none’,
      },
    },
  ],
});

export default routes;

Sendo cada objeto dentro do nosso vetor routes uma nova URL apontando para uma das views do nosso projeto (representados pelo elemento component), suas informações básicas como nome para referência no restante do sistema e a URL que aparecerá no navegador ao lado do domínio. Além dessas, podemos configurar o que cada tela precisa, por exemplo, se precisa de barra de ferramentas.

Mas ok, aprendemos a criar rotas diferentes para o nosso site. Mas e as páginas em si, como vamos estilizar e dar a nossas telas o corpo e alma que elas tanto precisam?

Seguindo o que estabelecemos acima, nossas telas, ou views, são a cara do projeto, o que o seu usuário vai interagir. E para isso, vamos precisar entender a estrutura dos arquivos .vue.

// src/views/Login.vue

<template>
  <div class=”app”>
    `Aqui vai todo seu código HTML, todas as suas div’s e p’s,
    já voltamos aqui pra discutir como deixar bonitão`
  </div>
</template>

<script>
  export default {
    name: ‘Login’,

    `A tag script é o cérebro da página, onde todo o javascript vai ser pintado.
    O Vue tem algumas sinuâncias em como esse cérebro funcione,
    mas nada que um bom exemplo não resolva`
  };
</script>

<style>
  .app {
    `Aqui, é onde o nosso HTML ganha forma, e o usuário se encanta,
    não temos muito a explicar aqui, é só css`
  }
</style>

E se eu não quiser perder muito tempo escrevendo CSS, mas ainda quiser deixar minha página bonita, o que posso fazer?

É aí que entra o nosso querido Vuetify.

Vuetify

O Vuetify é uma adaptação do Material Design feita especialmente para o Vue. Toda a beleza que o MD te oferece com muita facilidade. Você não precisa saber de Design Gráfico para conseguir criar interfaces de usuário simples e elegantes.

Para instalar, basta adicionar as seguintes diretrizes no seu sistema:

// src/main.js

import ‘@mdi/font/scss/materialdesignicons.scss’;
import Vue from ‘vue’;
import Vuetify from ‘vuetify/lib’;

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: ‘mdi’,
  },
  theme: {
    themes: {
      light: {
        primary: ‘#212121’,
        text_color: ‘#FFFFFF’,
        accent: ‘#FF4900’,
      },
    },
  },
});

Similar ao Vue Router, onde importamos a biblioteca do Vue e do Vuetify, e dizemos ao Vue para enxergar os componentes que o Vuetify traz, importamos também uma biblioteca de ícones svg do próprio Material Design, para que tudo tenha uma aparência uniforme.

Após informar ao Vuetify que planejamos usar os ícones do Material Design (ou mdi), configuramos o tema do site, com a cor primária do site, a cor do texto, e uma cor para detalhes, por exemplo.

Não entraremos em muitos detalhes dos componentes do Vuetify, mas fica aqui o link para a documentação pra você procurar o que usar pra deixar seu sistema do jeito que você precisa.

Aliás, falando em componentes, você sabia que você pode retirar alguns pedaços das suas telas, e colocar em arquivos que podem ser inseridos em qualquer página, evitando linhas repetidas, e encurtando seu trabalho? Já fizemos um artigo sobre Componentização usando VueJS. Aproveite o embalo e já adicione esse conceito e outros do Guia do Dev Iniciante aos seus conhecimentos.

Texto por Claudio Caramori.