configuracao.md

@@ -82,9 +82,60 @@ https://www.postman.com/downloads/
 
 ## Frontend
 
-### Configurando a Máquina
+### Frontend
 
-TBD
+O projeto **Adote um Amanhã** utiliza o _framework_ [**VueJS**](https://v2.vuejs.org/) para a construção do _frontend_. Mais informações sobre o **Vue** poderão ser encontradas na sua [documentação](https://v2.vuejs.org/v2/guide/).
+
+**IMPORTANTE:** No nosso projeto será utilizado o **Vue2**, que possui algumas diferenças de sintaxe em relação ao **Vue3**. Ao ler a documentação, certifique-se de que ela é referente à versão **2** do framework.
+
+Para baixar e utilizar o projeto, é necessário instalar as ferramentas abaixo:
+
+- [Visual Studio Code](https://code.visualstudio.com/download)
+- [Node (npm)](https://nodejs.org/en/download/)
+- [Git](https://git-scm.com/downloads)
+
+Tendo instalado as ferramentas, seguir os passos abaixo para baixar e executar o projeto:
+
+1. Em uma pasta de sua preferência, abrir o terminal e clonar o projeto: `git clone http://tools.ages.pucrs.br/adote-um-amanha/adote-um-amanha-frontend.git`. Possivelmente será pedido o seu _username_ e senha do gitlab.
+1. Quando o clone terminar, abrir a pasta do projeto no VS Code: `code adote-um-amanha-frontend`.
+1. No VS Code, abrir o terminal **(Ctrl + J)** e instalar os módulos do npm: `npm install`
+1. Após a instalação é possível executar o projeto rodando `npm run serve`.
+1. O projeto estará rodando e poderá ser acessado pelo seu navegador no endereço http://localhost:8080.
+
+#### Extensões do Editor
+
+Para facilitar e agilizar o processo de desenvolvimento, existem algumas extensões do **VSCode** que são recomendadas:
+
+- **Vetur**: Extensão que contém várias facilidades para o desenvolvimento com **Vue**, como destaque de sintaxe, cores nos arquivos `.vue` e atalhos de código bastante úteis.
+- **ESLint**: Extensão que sinaliza possíveis erros de sintaxe no Javascript.
+- **Prettier**: Extensão que aplica formatação e identação nos arquivos automaticamente.
+
+#### Configurando as extensões
+
+##### Prettier
+
+Para configurar o **Prettier** depois de instalá-lo, siga os passos abaixo:
+
+1. No VS Code, pressione **Ctrl + Shift + P**, e no campo de texto que aparecer, digite **Open Settings JSON** e clique na opção que aparecer, para abrir o arquivo `settings.json` do VS Code:  
+<img src="https://tools.ages.pucrs.br/adote-um-amanha/adote-um-amanha-wiki/-/raw/main/images/settings-json.png">    
+
+2. No arquivo `settings.json`, cole os campos abaixo dentro das chaves mais externas. Isso serve para definirmos o **Prettier** como formatador padrão para os arquivos e para a formatação ser aplicada toda vez que salvarmos o arquivo.
+
+```JSON
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+```
 
 ### Compilando