SPA com Vue JS e API com Laravel

Aprenda a criar aplicações de uma Página com Vue JS

Created byGuilherme Ferreira

Last updated 12/2018

Portuguese

What you'll learn

Aprender a configurar o Admin LTE com o Vue JS
Aprender a configurar o Materialize com Vue JS
Criar uma projeto semelhante a uma rede social com Vue JS
Trabalhar com o sistema de Rotas do Vue JS
Persistir dados de Forma Local com Storage
Realizar requisições HTTP
Trabalhar com Vuex
Preparar o projeto para subir para o servidor

Course content

1 section • 100 lectures • 17h 8m total length

Ferramentas utilizadas3:42
Instalando o Vue CLI5:20
Criando o Projeto7:22
Código Fonte das Aulas3:01
Diretórios do Projeto16:37
Exemplo com Script Externo4:31
Código de Produção7:26
Configurando o Materialize8:06
Configurando com AdminLTE13:07
Componente NavBar15:44
Rodapé13:06
Sistema de Grid9:07
Preparando o Menu Lateral8:48
Cartão de Conteúdo - Parte 113:11
Cartão de Conteúdo - Parte 24:17
Componente de detalhe do conteúdo6:43
Campo para Publicar Conteúdos15:36
Componente de Publicar Conteúdos6:31
Sistema de Templates17:59
Organizando com Slots6:46
Otimizando o NavBar e links de Navegação7:49
Url Amigáveis no Vue JS9:25
Formulário de Login e Cadastro5:55
Url Amigável para Login e Cadastro9:03
Instalando o Laravel16:48
Configurando a Autenticação via Token15:27
Utilizando o Postman8:18
Criando o Cadastro7:21
Retornando o Token no Cadastro7:56
Validação no Cadastro6:59
Traduzindo Erros de Validação4:07
Método de Login na API8:12
Http com Axios no Vue JS16:20
Lógica para Retorno do login7:04
Exibindo os Erros6:31
Preparando o sistema de Login - Parte 121:06
Preparando o sistema de Login - Parte 26:28
Implementando o Cadastro11:11
Tela de Perfil - Parte 18:45
Tela de Perfil - Parte 26:26
Tela de Perfil - Parte 39:14
Atualizando as informações do Perfil16:18
Adicionando o Atributo de Imagem8:03
Preparando o Campo Imagem no Vue JS13:49
Enviando a Imagem para o Servidor19:43
Deletando Imagens Antigas3:19
Validação de Imagem Base645:19
Dados do Usuário na Tela Principal8:53
Imagem Padrão e Criando um Controle10:59
Passando a lógica para os Controles6:05
Configurando CORS no Laravel8:31
Modelando o Banco de Dados11:18
Definindo as Migrações10:33
Definindo os relacionamentos16:15
Modelo de como Adicionar Conteúdos7:10
Modelo de como Adicionar Amigos5:20
Modelo de como Adicionar Curtidas e Comentários6:45
Definindo instância para o Axios e Url da API8:17
Padronizando os Retornos da API22:18
Formulário para Publicar Conteúdo6:34
Adicionar Conteúdo Parte 123:00
Adicionar Conteúdo Parte 211:28
Introdução ao Vuex21:37
Centralizando o Sistema de Login12:36
Otimizando o acesso aos dados do usuário7:58
Listando Conteúdos20:37
Corrigindo erro no Cadastro de Perfil4:29
Publicando Conteúdo5:19
Listando Conteúdos com Vuex16:43
Validação e Lógica para Exibir Conteúdos17:53
Iniciando o Sistema de Curtir10:02
Curtindo o Conteúdo15:38
Finalizando o Sistema de Curtir16:40
Iniciando a lógica de comentários10:03
Quantidade de Comentários do Conteúdo5:54
Exibindo Comentários11:29
Nome e Imagem do Usuários nos Comentários3:34
Formatando Data e Hora de Conteúdos e Comentários6:59
Cadastro de Comentários10:54
Paginação com Vue Js e Laravel17:24
Rolagem Infinita no Vue JS13:33
Corrigindo erro na Publicação3:36
Dica - Deletando Registros com o Tinker7:08
Criando a Rota para Página do Usuário5:12
Criando a Rota para Página do Usuário11:49
Exibindo a Imagem do Dono da Página4:21
Link para Páginas11:38
Aplicando um Slug na URL15:12
Corrigindo Erros e Botão Seguir16:16
Método para Seguir6:04
Requisição para Seguir Amigo6:50
Esconder o Botão Seguir4:41
Método de Lista de Amigos7:13
Listando Amigos na Home11:37
Listando Amigos na Página12:25
Finalizando o Sistema de Amigos9:51
Testando a Aplicação9:10
Lista de Seguidores11:18
Lista de Seguidores15:02
Considerações Finais11:58

Requirements

Ferramenta para Editar Códigos como o ATOM
Instalar o Node JS
Básico de Vue JS - Curso de Introdução ao Vue JS
Básico de JS, HTML, CSS
Lógica de programação

Description

Aprenda a criar SPA (Single Page Application - aplicação de uma Página) com Vue JS e uma API com Laravel 5.5. Você vai aprender a configurar um tema como o Admin LTE ou Materialize em um projeto com Vue JS utilizando o conceito de SPA que são aplicações de uma página que vai ser muito semelhante ao funcionamento de um software desktop. Além de atender esse objetivo o curso busca contemplar conceitos como requisições HTTP, sistema de Rotas, vuex e outros.

Who this course is for:

Programadores Front-End
Programadores Back-End
Desenvolvedor Web e de Aplicativos