Projetos Front-end com Vue.js 3 – 2ª Edição

Sumário

• Colaboradores
• Prefácio
• Parte I ■ Introdução e curso intensivo
• Capítulo 1 ■ Começando seu primeiro projeto Vue
• Requisitos técnicos
• Vendo o Vue como um framework
  • Angular versus Vue
  • React versus Vue
  • Vantagens do uso do Vue em um projeto
  • Trabalhando com o Vue
  • Entendendo a instância Vue
• Definição de uma aplicação Vue com a ajuda do Vite
  • Arquitetura SFC do Vue
  • Exercício 1.01 – criação do seu primeiro componente
• Uso de propriedades data como um estado local
• Criação de componentes com script setup
  • Exercício 1.02 – interpolação com condicionais
• Entendendo as diretivas do Vue
  • Exercício 1.03 – explorando diretivas básicas (v-text, v-once, v-html, v-bind, v-if, v-show)
• Ativação da vinculação bidirecional com o uso de v-model
  • Exercício 1.04 – testando a vinculação bidirecional usando v-model
• Entendendo a iteração em dados com v-for
  • Iteração básica usando v-for
  • Exercício 1.05 – usando v-for para iterar por um array de strings
  • Iteração por um array de objetos
    • propriedades em condições v-if
  • Iteração por uma coleção baseada em chaves (Object)
  • Exercício 1.07 – usando v-for para percorrer as propriedades de Object
• Explorando métodos
  • Exercício 1.08 – acionando métodos
  • Exercício 1.09 – retornando dados usando métodos Vue
• Entendendo os hooks de ciclo de vida de componentes
  • Exercício 1.10 – usando um ciclo de vida do Vue para controlar dados
• Estilização de componentes
  • Exercício 1.11 – importando o SCSS para um componente com escopo
  • Definição de CSS dinâmico baseado em estado no Vue
• Entendendo os módulos CSS
  • Exercício 1.12 – estilizando componentes Vue usando módulos CSS
  • Atividade 1.01 – criando uma aplicação dinâmica de lista de compras usando o Vue
• Resumo
• Capítulo 2 ■ Trabalhando com dados
• Requisitos técnicos
• Entendendo as propriedades computadas
  • Exercício 2.01 – implementando dados computados em um componente Vue
• Entendendo os setters computados
  • Exercício 2.02 – usando setters computados
• Explorando os observadores
  • Exercício 2.03 – usando observadores para definir novos valores
• Observação de propriedades aninhadas
  • Exercício 2.04 – observando as propriedades aninhadas de um objeto de dados
• Explorando os métodos assíncronos e a busca de dados
  • Exercício 2.05 – usando métodos assíncronos para recuperar dados de uma API
• Comparação de métodos, observadores e propriedades computadas
  • observador e props computados
  • Atividade 2.01 – criando uma lista de blog usando a API Contentful
• Resumo
• Capítulo 3 ■ Vite e Vue Devtools
• Requisitos técnicos
• Usando o Vite
  • Exercício 3.01 – definindo um projeto Vue
• Usando o Vue Devtools
  • Aba Components
  • Aba Timeline
  • Exercício 3.02 – depurando uma aplicação usando o Devtools
  • Atividade 3.01 – criando uma aplicação Vue com o Pinia e o Router usando o Vite
• Resumo
• Parte II ■ Criando sua primeira aplicação Vue
• Capítulo 4 ■ Aninhamento de componentes (modularidade)
• Requisitos técnicos
• Passagem de props
  • Definição de um componente simples que aceita props
  • Passagem de props para um componente
  • Exercício 4.01 – Implementando um componente Greeting
  • Vinculação de dados reativos a props
  • Exercício 4.02 – Passando dados reativos que mudem com frequência os props
• Conhecendo os tipos e a validação de props
  • Validação de prop primitivo
  • Conhecendo os tipos de props personalizados e de união
  • Validação personalizada de arrays e objetos
  • Conhecendo os props obrigatórios
  • Definição do valor padrão dos props
  • Registro de props em <script setup> (hook setup)
  • Exercício 4.03 – Validando uma propriedade Object
• Conhecendo os slots, os slots nomeados e os slots com escopo
  • Passagem de marcação para um componente para renderização
  • Uso de slots nomeados para delegar a renderização de várias seções
  • Uso de slots com escopo para encapsular a lógica de passagem de props
  • Exercício 4.04 – Implementando um componente de cartão usando slots nomeados
• Conhecendo os refs do Vue
  • Exercício 4.05 – Encapsulando Countable js na aplicação Vue
• Usando eventos para a comunicação filho-pai
  • Registro de eventos com <script setup> (ou com o hook setup)
  • Atividade 4.01 – Visualização de mensagem local com componentes reutilizáveis
• Resumo
• Capítulo 5 ■ Composition API
• Requisitos técnicos
• Criação de componentes com o método de ciclo de vida setup()
  • Exercício 5.01 – criando um componente de saudação com setup()
  • Criação de um componente com setup() e h()
  • Exercício 5.02 – criando um componente de saudação com as funções setup() e h()
• Trabalho com dados
  • Definição de um estado local reativo com ref()
  • Definição de um estado local reativo com reactive()
  • Exercício 5.03 – vinculando um componente com ref() e reactive()
  • Obtendo um estado reativo a partir de outro estado local com computed()
  • Exercício 5.04 – Implementando dados computados com computed()
  • Uso de observadores com watch()
  • Exercício 5.05 – Usando observadores para definir novos valores
• Conhecendo as funções de ciclo de vida dos composables
  • Exercício 5.06 – Usando as funções de ciclo de vida para controlar o fluxo de dados
• Criando seu composable (hook personalizado)
  • Exercício 5.07 – Criando seu primeiro composable
  • Atividade 5.01 – Criando um componente BlogView com a Composition API
• Resumo
• Capítulo 6 ■ Composição global de componentes
• Requisitos técnicos
• Conhecendo os mixins
  • Exercício 6.01 – Criando seu mixin
• Conhecendo os plugins
  • Exercício 6.02 – Criando um plugin Axios personalizado
• Registrando componentes globalmente
  • Uso de componentes Vue não SFC
• Conhecendo as tags component
  • Renderização de componentes dinâmicos por referência de nome ou componente
  • Armazenamento do estado de um componente dinâmico em cache com keep-alive
  • Exercício 6.03 – Criando um layout de cartão dinâmico com a tag component
• Escrevendo componentes funcionais
  • Atividade 6.01 – Criando uma aplicação Vue js com plugins e componentes reutilizáveis
• Resumo
• Capítulo 7 ■ Roteamento
• Requisitos técnicos
• Conhecendo o roteamento
• Conhecendo o Vue Router
  • Instalação do Vue Router
• Explorando o elemento RouterView
  • Passagem de props para a visualização
  • Trabalhando com RouterView
• Configurando o Vue Router
• Definição das rotas
  • Dicas sobre o carregamento de componentes para a configuração de rotas
  • Definição da instância de roteador
• Definição de um layout padrão para sua aplicação
  • Exercício 7.01 – Implementando uma página Message Feed usando o Vue Router
• Definição de links de navegação com RouterLink
  • Dicas para a implementação do botão Back
  • Exercício 7.02 – Adicionando o link de navegação à rota MessageFeed
• Passagem de parâmetros de rota
• Conhecendo os hooks do Router
  • Definição de hooks beforeEach
  • Diferenciando os hooks beforeEach e beforeResolve
  • Hook afterEach
  • Personalização de hooks por rota
  • Definição de hooks in-component
• Passando parâmetros com props
  • mensagem e exibindo-o
• Roteamento dinâmico
• Captura de caminhos de erro
• Rotas aninhadas
  • Exercício 7.05 – Criando abas de navegação dentro da visualização de mensagens
• Uso de layouts
  • layouts
• Resumo
• Capítulo 8 ■ Animações e transições
• Requisitos técnicos
• Conhecendo as transições do Vue
  • Uso do elemento de transição
  • Explorando as classes de transição
  • Animação para um componente
  • Explorando as classes de transição personalizadas
• Explorando os hooks do JavaScript para transições
  • Exercício 8.01 – Adicionando uma nova mensagem com um efeito de animação
• Fazendo a transição com grupos de elementos
  • Criação de um efeito de movimento durante a transição de uma lista
  • Configuração de uma animação na renderização inicial
  • Exercício 8.02 – Ordenando uma lista de mensagens com uma animação
• Examinando as rotas de transição
  • Exercício 8.03 – Criando um efeito de transição para cada rota navegada
• Uso da biblioteca GSAP para animação
  • Instalação da GSAP
  • Interpolações básicas
  • Exercício 8.04 – Interpolando com a GSAP
  • Modificando a aparência com suavização
  • Modificação da aparência com stagger
  • Usando a linha do tempo
  • Atividade 8.01 – Criando uma aplicação de mensagens com transições e com a GSAP
• Resumo
• Parte III ■ Gerenciamento de estado global
• Capítulo 9 ■ O estado no gerenciamento de estados do Vue
• Requisitos técnicos
• Conhecendo a arquitetura dos componentes e o problema do estado
• Mantendo o estado em um componente ancestral comum
  • Exercício 9.01 – Adicionando um campo de profissão ao gerador de cartões de perfis
  • Exercício 9.02 – Adicionando um botão Clear ao gerador de cartões de perfis
• Adicionando um gerenciamento de estado simples
  • perfis e atualizando a lógica de limpeza
  • de cartões de perfis
• Decidindo quando usar um estado local ou um estado global
• Resumo
• Capítulo 10 ■ Gerenciamento de estado com o Pinia
• Requisitos técnicos
• O que é o Pinia
• Instalação do Pinia
• Usando o Pinia para criar um armazenamento
  • compartilhado
• Adicionando e usando getters em seu armazenamento Pinia
  • Exercício 10.02 – Melhorando a aplicação de visualização de cores com getters
  • Recursos adicionais dos getters
• Trabalhando com ações do Pinia
  • visualização de cores
• Depurando o Pinia no Devtools
• Resumo
• Parte IV ■ Teste e implantação da aplicação
• Capítulo 11 ■ Teste de unidade
• Requisitos técnicos
• Conhecendo os testes e entendendo por que é necessário testar o código
  • Diferentes tipos de teste
• Criando seu primeiro teste
• Testando componentes
• Testando métodos de componente
  • Exercício 11.02: Criando e testando um método ellipsis
• Testando o roteamento do Vue js
  • Exercício 11.03: Criando uma página de tags e testando seu roteamento
• Testando o gerenciamento de estado com o Pinia
  • Exercício 11.04: Criando e testando um banner de permissão de uso de cookies
• Teste de snapshot
  • Atividade 11.01: Adicionando uma página simples de busca por título com testes
• Resumo
• Capítulo 12 ■ Teste de ponta a ponta
• Requisitos técnicos
• Conhecendo o teste E2E e seus casos de uso
• Configuração do Cypress para uma aplicação Vue js
• Usando o Cypress para interagir com e inspecionar uma UI do Vue js
• Acionando e esperando atualizações de UI com o Cypress
  • funcionalidade Submit
  • Exercício 12.03 – Adicionando um estado submitting ao editor de novo comentário
• Interceptação de requisições HTTP
  • Exercício 12.04 – Comentário enviado para a API em requisição POST
  • Atividade 12.01 – Adicionando a possibilidade de definir o email de um usuário e testar
• Resumo
• Capítulo 13 ■ Implantação do código na web
• Requisitos técnicos
• Criando builds de aplicações para produção
• Usando o GitLab CI/CD para testar nosso código
  • Exercício 13.01 – Adicionando uma etapa de linting ao nosso pipeline do GitLab CI/CD
• Implantando no Netlify
  • Exercício 13.02 – Implantando um site no Netlify a partir do GitHub
• Implantando na AWS usando o S3 e o CloudFront
  • Exercício 13.03 – Implantando no S3 a partir do GitLab CI/CD
    • implantando no Netlify
• Resumo
• Índice remissivo