https://github.com/ipetinate/workshop-vue
Criando uma Aplicação Web PWA/SPA com Vue.js + Vuetify e consumindo dados através de requisições HTTP com AXIOS HTTP Client
https://github.com/ipetinate/workshop-vue
axios nodejs spa vue vue-vuetify workshop-vue
Last synced: 3 months ago
JSON representation
Criando uma Aplicação Web PWA/SPA com Vue.js + Vuetify e consumindo dados através de requisições HTTP com AXIOS HTTP Client
- Host: GitHub
- URL: https://github.com/ipetinate/workshop-vue
- Owner: ipetinate
- Created: 2018-12-30T23:59:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-04T00:58:53.000Z (over 6 years ago)
- Last Synced: 2025-01-04T14:22:56.611Z (5 months ago)
- Topics: axios, nodejs, spa, vue, vue-vuetify, workshop-vue
- Language: JavaScript
- Size: 15 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Workshop Vue - Aplicação Web
> Criando uma Aplicação Web PWA/SPA com Vue.js + Vuetify e consumindo dados através de requisições HTTP com AXIOS HTTP Client
_________________________________________
> Conteúdo abordado:
- O que é:
- Vue.js
- Vuetify
- PWA e SPA
- AXIOS Client HTTTP
- Instalação do Vue-CLI 3
- Iniciando Projeto Vue com Webpack via Vue UI
- Instalando Plugins no Vue: Vuetify e AXIOS
- Instalando Plugins no VS Code: Vetur, Vuetify
- Configuração básica do manifest.json
- Montando interface simples no componente Home.vue com elementos do Vuetify
- Montando API Fake com arquivo db.json e JSON Server
- Consumindo dados da api fake no Front-end com Axios
_________________________________________
> ## Atenção:
- Todos os arquivos estão comentados e com guias do que são/significam, então leia e qualquer duvida entre em contato ou abra uma issue (não é recomendado, mas nesse caso não tem problema)
- Verifique os README dos diretórios deste repósitorio para maiores informações, procurei detalhar melhor o processo de API Fake com JSON Server no README da Pasta [/database](https://github.com/IsacPetinate/workshop-vue/tree/master/web-app/database) que está dentro da pasta /web-app, e as informações mais detalhadas sobre as estrutura do projeto e o que são cada item pode ser encontrada no README do diretório [/web-app](https://github.com/IsacPetinate/workshop-vue/tree/master/web-app)
- A Apresentação de slides em formato PowerPoint e PDF pode ser encontrada na pasta [Apresentação](https://github.com/IsacPetinate/workshop-vue/tree/master/Apresenta%C3%A7%C3%A3o)
_________________________________________
> Comandos Úteis [Terminal/PowerShell/CMD]:
```
npm install -g @vue/cli ----> instala o Vue CLI na versão 3, -g para instalação global
vue create web-app ----> cria um novo projeto Vue com webpack e configurações default
vue ui ----> inicia a dashboard gráfica do vue
```
> ## Requisitos e Links:
- [NodeJS](https://nodejs.org/en/) [página de download]
- [Vue-CLI 3](https://cli.vuejs.org/guide/) [documentação e quickstart]
- [Vuetify](https://vuetifyjs.com/pt-BR/getting-started/quick-start) [documentação e quickstart]
- [AXIOS](https://github.com/axios/axios) [documentação e quickstart]
- [JSON Server](https://www.npmjs.com/package/json-server) [repositório npm]
- [Material Icons](https://material.io/tools/icons/?search=list&style=baseline) [consulta de icones]