| ... | ... | @@ -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
|
|
|
|
|
| ... | ... | |
