|
|
|
# Informações Vuejs
|
|
|
|
> Dados gerais sobre a aplicação front-end
|
|
|
|
|
|
|
|
|
|
|
|
### Palavras-chave:
|
|
|
|
Single-Page Applications (SPA), Component-Based-Architecture (CBA), Web components, Reatividade, Modularidade.
|
|
|
|
|
|
|
|
### Links:
|
|
|
|
Resumo de cada ponto das palavras chaves acima. Importante para entender o framework:
|
|
|
|
http://thulioph.com/notes/2017/03/29/vuejs/
|
|
|
|
|
|
|
|
|
|
|
|
### Template utilizado:
|
|
|
|
http://vuejs-templates.github.io/webpack/structure.html
|
|
|
|
https://github.com/vuejs-templates/webpack
|
|
|
|
|
|
|
|
|
|
|
|
### Tecnologias:
|
|
|
|
**Vuejs:** framework javascript
|
|
|
|
**Bootstrap:** biblioteca CSS
|
|
|
|
**Babel (transpiler):** para poder usar as versões mais atuais do JS e funcionar em todos os browser.
|
|
|
|
**Webpack (module bundler):** browsers ainda não suportam a modularização, então o webpack organiza e junta os módulos.
|
|
|
|
|
|
|
|
|
|
|
|
### Desenvolvimento:
|
|
|
|
- Para gerar o template inicial foi usado o **vue-cli**. É uma ferramenta de linha de comando que gera projetos com a arquitetura e configuração pronta para uso. Para o Arbitrium foi o utilizado o template **webpack**.
|
|
|
|
|
|
|
|
- Como Vue trabalha com componentes, então foi decidido manter a forma mais fácil de se trabalhar do framework que é com **Single-File Components**. Onde cada componente trabalha de forma separada com seu próprio HTML, CSS e JS.
|
|
|
|
|
|
|
|
- Para a organização das pastas foi decidido manter o template original do **vue-cli** *(http://vuejs-templates.github.io/webpack/structure.html)* com duas alterações: as pastas ***pages*** e ***services***.
|
|
|
|
|
|
|
|
- A pasta *pages* é onde está cada página da aplicação, por exemplo: *Home* (iniciar jogo), *Schedule* (agenda), *WeekSimulation* (passagem do tempo), *Result* (resultado da semana), *GameOver* (fim do jogo).
|
|
|
|
|
|
|
|
- Em *services* é onde fica a integração com a API para fazer a conexão e buscar os dados.
|
|
|
|
|
|
|
|
- As demais pastas seguiram a organização oficial do Vue, como a pasta *router* que faz o gerenciamento de todas as rotas da aplicação. E a pasta *components*, onde ficam os componentes que serão utilizados em cada página.
|
|
|
|
|
|
|
|
|
|
|
|
____________________________________________________________
|
|
|
|
|
|
|
|
|
|
|
|
**Acesse o repositório:**
|
|
|
|
http://www.tools.ages.pucrs.br/arbitrium/web |
|
|
|
\ No newline at end of file |
