Utilização da Aplicação

Descrição

TBD

Instruções

Frontend

O projeto Adote um Amanhã utiliza o framework VueJS para a construção do frontend. Mais informações sobre o Vue poderão ser encontradas na sua documentação.

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
• Node (npm)
• Git

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.
2. Quando o clone terminar, abrir a pasta do projeto no VS Code: code adote-um-amanha-frontend.
3. No VS Code, abrir o terminal (Ctrl + J) e instalar os módulos do npm: npm install
4. Após a instalação é possível executar o projeto rodando npm run serve.
5. 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:

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.

  "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"
  },