Desenvolvendo Calculadora em Vue.Js — Refatorando o projeto
Tags: tutorial, vue, javascript, beginners
Published: 2019-09-20 14:48:40

---
title: Desenvolvendo Calculadora em Vue.Js — Refatorando o projeto
published: true
description: Série de artigos ensinando como desenvolver uma Calculadora em Vue.js com a finalidade de ensinar conceitos básicos do framework.
tags: tutorial, vue, javascript, beginners
series: Desenvolvendo Calculadora em Vue.Js
---

No **[último post](https://dev.to/glaucia86/desenvolvendo-calculadora-em-vue-js-logica-no-javascript-15n6)** criamos toda a lógica da nossa Calculadora usando o JavaScript. Porém, se vocês notarem, toda a aplicação está concentrada em um único arquivo. E eu particularmente, não curto desenvolver um projeto Front-End dessa maneira, porque ele pode crescer a ponto que ficar inviável de entender todo o contexto do projeto.

Durante esse artigo, vamos realizar a refatoração desse projeto, deixando ele mais fácil de ser mantido.

Vamos nessa?!

## Refatorando o projeto

Em Vue.js, há 2 maneiras em que você pode estruturar o seu projeto:

* **[Single-File Component](https://br.vuejs.org/v2/guide/single-file-components.html)**: que seria trabalhar com os escopos HTML, CSS e JavaScript em um único arquivo **.vue**, a qual centralizará todas as responsabilidades pela aparência e comportamento  

* **[Fazer split dos arquivos](https://forum.vuejs.org/t/split-single-file-component/34155)**: que seria fazer uma separação de responsabilidade, visando o conceito **[SOLID](https://www.infoq.com/br/news/2014/02/solid-principios-javascript/)**.

Nessa parte do tutorial, estarei explicando como realizar a separação dos arquivos de uma maneira correta e seguindo o **[Style Guide](https://vuejs.org/v2/style-guide/)** do Vue.js de nomenclatura de arquivos e pastas.

## Separando os arquivos do componente 'Calculadora.vue'

Abram o Visual Studio Code e o projeto da Calculadora. Dentro da pasta `src -> components`, crie uma pasta chamada `Calculadora`.

Depois dentro da pasta `Calculadora`, crie os seguintes arquivos:

* index.vue (altere o arquivo 'Calculadora.vue' para 'index.vue')
* calculadora.css
* calculadora.js

A estrutura das pastas ficarão da seguinte forma:

[![Screen-Shot-06-20-19-at-07-24-PM.png](https://i.postimg.cc/hPfSF4Nn/Screen-Shot-06-20-19-at-07-24-PM.png)](https://postimg.cc/zVYmKNJ2)

Feito isso, vamos agora realizar a separação dos arquivos.

## Realizando a separação do bloco style

Abram o arquivo `index.vue` e copiem todo o conteúdo contido na tag `<style></style>` e cole no arquivo `calculadora.css`. 

O arquivo `calculadora.css` deverá ficar da seguinte maneira:

```css
.calculadora {
  margin: 0 auto;
  width: 350px;
  font-size: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
}

.display {
  grid-column: 1 / 5;
  background-color: #333;
  color: white;
}

.zero {
  grid-column: 1 / 3;
}

.botao {
  background-color: #f2f2f2;
  border: 1px solid #999;
}

.operadores {
  background-color: orange;
  color: white;
}
```

Já no arquivo `index.vue`, vamos agora realizar a referência do arquivo `calculadora.css` dentro da tag `<style></style>` e notem como deve ficar:

```vue
<style src="./calculadora.css" scoped />
```

Execute a aplicação e veja se está tudo funcionando. Se sim. Vamos dar continuidade!

## Realizando a separação do bloco script

O procedimento será muito parecido com o que fizemos no arquivo `calculadora.css`. Abram o arquivo `index.vue` e copie todo o bloco de script e cole no arquivo `Calculadora.js`

O arquivo `Calculadora.js`, ficará da seguinte forma:

```js
/**
 * Arquivo: src/components/Calculadura.js
 * Data: 20/06/2019
 * Author: Glaucia Lemos
 * Descrição: arquivo responsável por tratar toda a lógica da Calculadora.
 */

export default {
  name: 'Calculadora',
  data() {
    return {
      numeroAnterior: null,
      valorCorrente: '',
      operador: null,
      operadorClicado: false,
    };
  },

  methods: {
    // Método responsável por limpar o display da 'Calculadora'
    limpar() {
      this.valorCorrente = '';
    },

    /*
    * Método responsável por colocar o sinal '-' ou '+' para realização de operações
    * matemáticas especiais.
    */
    sinal() {
      this.valorCorrente = this.valorCorrente.charAt(0) === '-'
        ? this.valorCorrente.slice(1)
        : `-${this.valorCorrente}`;
    },

    // Método responsável por realizar operações com 'porcentagem':
    porcentagem() {
      this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`;
    },

    // Método responsável por juntar os números no display da Calculadora:
    juntarNumeros(numero) {
      if (this.operadorClicado) {
        this.valorCorrente = '';
        this.operadorClicado = false;
      }
      this.valorCorrente = `${this.valorCorrente}${numero}`;
    },

    // Método responsável por adicionar 'ponto' no display da Calculadora:
    ponto() {
      if (this.valorCorrente.indexOf('.') === -1) {
        this.juntarNumeros('.');
      }
    },

    // Método responsável por 'resetar' o valor na Calculadora:
    setarValor() {
      this.numeroAnterior = this.valorCorrente;
      this.operadorClicado = true;
    },

    // Método responsável por realizar a operação da 'divisão' da Calculadora
    dividir() {
      this.operador = (a, b) => a / b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'multiplicação' da Calculadora
    multiplicar() {
      this.operador = (a, b) => a * b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'diminuir' da Calculadora
    diminuir() {
      this.operador = (a, b) => a - b;
      this.setarValor();
    },

    // Método responsável por realizar a operação da 'adição' da Calculadora
    somar() {
      this.operador = (a, b) => a + b;
      this.setarValor();
    },

    // Método responsável por apresentar o resultado das operações na Calculadora
    resultado() {
      this.valorCorrente = `${this.operador(
        parseFloat(this.numeroAnterior),
        parseFloat(this.valorCorrente),
      )}`;
      this.numeroAnterior = null;
    },
  },
};
```

Agora, volte ao arquivo `index.vue` e vamos referenciar o arquivo `Calculadora.js`, dentro da tag script, da seguinte forma:

```vue
<script src="./Calculadora.js"></script>
```

Execute a aplicação e veja se está tudo funcionando. Se sim, terminamos! 😊

## Finalização do desenvolvimento do arquivo 'index.vue'

Observem que, o arquivo `index.vue` ficou muito mais clean e melhor para manter. Gosto dessa abordagem, devido ao bloco de script e css que tendem a ficar maiores caso o projeto seja extensivo, dificultando a manutenção desses componentes.

Não é errado usar o conceito Single-File Component, repito, gosto da abordagem de separação de arquivos por motivos pessoais. Assim sendo, caso deseja manter o projeto seguindo o SFC, não tem problemas! 

Caso desejam ver todo o projeto pronto, bastam acessar **[AQUI](https://github.com/glaucia86/live-coding-vuejs-calculadora)**

Nesse repositório também consta os vídeos ensinando o passo a passo em como desenvolver esse projeto. #ficaadica

Bom, o nosso projeto está pronto e preparado para ser enviado para a nuvem. Para isso, vamos usar o **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=devto-blog-gllemos)**, um dos serviços do Azure para realizar hospegadem de páginas estáticas de maneira simples e gratuita*

Mas, para isso, vamos deixar para o próximo artigo! 

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Nos vemos! Até a próxima! 😍