Aprendendo Vue

De Jideon F Marques

Aprenda os principais conceitos do Vue.js, a estrutura JavaScript moderna para criar aplicativos e interfaces front-end do zero. Com exemplos concisos, práticos e claros, este livro conduz os desenvolvedores web passo a passo pelas ferramentas e bibliotecas do ecossistema Vue.js e mostra como criar aplicativos completos para projetos web do mundo real. Você aprenderá como lidar com a comunicação de dados entre componentes com a arquitetura Pinia, desenvolver um sistema de roteamento gerenciável para um projeto front-end para controlar o fluxo do aplicativo e produzir efeitos básicos de animação para criar uma melhor experiência do usuário. Este livro também mostra como: Crie sistemas de componentes reutilizáveis ​​e leves usando Vue.js Traga reatividade ao seu aplicativo estático existente Configure um projeto usando Vite.js, uma ferramenta de construção para gerenciamento de código de projeto front-end Crie um sistema interativo de gerenciamento de estado para um aplicativo frontend com Pinia Conecte dados externos do servidor ao seu aplicativo Vue Controle o fluxo da aplicação com roteamento estático e dinâmico usando o Vue Router Teste totalmente seu aplicativo usando Vitest e Playwright

• Idioma: Português
• Editora: Clube de Autores
• Data de lançamento: 24 de fev. de 2024

Pré-visualização do livro

Aprendendo Vue

Aprendendo Vue

Conceitos Básicos e Padrões Práticos para Interfaces de Usuário Reutilizáveis, Combináveis e Escaláveis

POR: Jideon Marques

Direitos autorais © 2024 Jideon Marques. Todos os direitos reservados.

Licença de direitos autorais

O conteúdo contido neste livro não pode ser reproduzido, duplicado ou transmitido sem permissão direta por escrito do autor ou do editor.

Sob nenhuma circunstância qualquer culpa ou responsabilidade legal será responsabilizada contra o editor, ou autor, por quaisquer danos, reparações ou perdas monetárias devido às informações contidas neste livro, seja direta ou indiretamente. Notícia legal:

Este livro é protegido por direitos autorais. É apenas para uso pessoal. Você não pode alterar, distribuir, vender, usar, citar ou parafrasear qualquer parte ou o conteúdo deste livro sem o consentimento do autor ou editor.

Aviso de isenção de responsabilidade:

Observe que as informações contidas neste documento são apenas para fins educacionais e de entretenimento. Todos os esforços foram realizados para apresentar informações precisas, atualizadas, confiáveis e completas. Nenhuma garantia de qualquer tipo é declarada ou implícita. Os leitores reconhecem que o autor não está envolvido na prestação de aconselhamento jurídico, financeiro, médico ou profissional. O conteúdo deste livro foi derivado de diversas fontes. Consulte um profissional licenciado antes de tentar qualquer técnica descrita neste livro.

Ao ler este documento, o leitor concorda que sob nenhuma circunstância o autor é responsável por quaisquer perdas, diretas ou indiretas, que sejam incorridas como resultado do uso das informações contidas neste documento, incluindo, mas não limitado a, erros, omissões ou imprecisões.

Capítulo 1. Bem-vindo ao mundo Vue.js!

O que é Vue.js?

Vue.js, ou Vue, significa visualização em francês, é um mecanismo JavaScript para construir interfaces de usuário (UI) progressivas, combináveis e reativas em aplicativos frontend.

Observação

Usaremos o termo Vue para indicar Vue.js deste ponto em diante.

Vue é escrito sobre JavaScript e atua como o transcompilador (transpiler) que compila e traduz o código Vue em código HTML, CSS e JavaScript equivalente antes da implantação.

Vue segue o padrão MVVM (Model – View – ViewModel). Ao contrário do MVC (Model

– View – Controller), o ViewModel é o fichário que vincula os dados entre a View e o Model. Conseqüentemente, permitir a comunicação direta para a visualização e o modelo permite a reatividade do componente progressivamente.

Resumindo, o Vue foi criado para focar apenas na prototipagem da camada de visualização, mas é gradativamente adaptável para integração com outras bibliotecas externas para uso mais complexo.

Como o Vue se concentra exclusivamente na camada View, ele permite o desenvolvimento de aplicativos de página única (SPAs). Os SPAs agora podem se mover de forma rápida e fluida enquanto comunicam dados continuamente com o back-end.

O site oficial do Vue éSite Vue, incluindo documentação de APIs, instalação e casos de uso primários para referência.

Os benefícios do Vue no desenvolvimento web moderno Uma das vantagens significativas do Vue é sua documentação bem escrita e fácil de entender. Além disso, o ecossistema e a comunidade de suporte construídos em torno do Vue, como Vue-Router, Vuex e Pinia, são eficientes para ajudar os desenvolvedores a configurar e executar seus projetos com o mínimo esforço.

Além disso, as APIs do Vue são diretas e familiares para qualquer pessoa que já trabalhou com AngularJS ou jQuery. Sua poderosa sintaxe de modelo minimiza o esforço de aprendizado necessário e facilita o trabalho com dados ou a escuta de eventos DOM em seu aplicativo.

Outro benefício significativo que o Vue oferece é seu tamanho leve. O tamanho de uma estrutura é um aspecto substancial do desempenho da aplicação, especialmente o

tempo de carregamento inicial na entrega. No momento em que este artigo foi escrito, Vue era a estrutura mais rápida e leve (cerca de 10kB de tamanho). Essa vantagem resulta em downloads menos demorados e melhor desempenho em tempo de execução do ponto de vista do navegador.

Com o lançamento do Vue 3, o suporte integrado para TypeScript agora oferece aos desenvolvedores o benefício de digitar tipos e encontrar sua base de código mais legível, organizada e de fácil manutenção a longo prazo.

Instalando Node.js

Como qualquer outra estrutura moderna, trabalhar com Vue requer a configuração do ecossistema de desenvolvimento e conhecimento prévio de codificação para acompanhar o processo de aprendizagem. Node.js e NPM (ou Yarn) são ferramentas de desenvolvimento necessárias para instalar antes de começar a trabalhar em qualquer aplicativo.

Node.js (ou Node, abreviadamente) é um ambiente de servidor JavaScript de código aberto construído no mecanismo de tempo de execução JavaScript V8 do Chrome. O

Node permite que os desenvolvedores codifiquem e executem aplicativos JavaScript localmente ou em um servidor hospedado, fora de um navegador.

Observação

Os navegadores também usam o mecanismo V8 para interpretar o código JavaScript em um código de computador eficiente de baixo nível e executá-lo.

O Node é compatível com várias plataformas e é fácil de instalar. Caso você não tenha certeza se já instalou o Node, abra seu Terminal (ou Prompt de Comando no Windows) e execute o seguinte comando:

nó -v

A saída deve ser uma versão do Node ou Comando não encontrado se não houver nenhum Node instalado.

Se você ainda não instalou o Node ou se sua versão do Node é inferior a 12.2.0, visite o site do projeto Node emSite oficial do nóe baixe o instalador da versão mais recente com base no seu sistema operacional (Figura 1-1).

Figura 1-1. Versão mais recente para download no site oficial do Node Assim que o download terminar, clique no instalador e siga as instruções para configurá-lo adequadamente.

Ao instalar o Node, além do comando node, você também tem o comando npm adicionado à ferramenta de linha de comando. Se você digitar o comando node -v, deverá ver o número da versão instalada exibido.

NPM

O Node Package Manager (NPM) é o gerenciador de pacotes padrão do Node. Ele será instalado junto com o Node.js por padrão. Ele permite que os desenvolvedores baixem e instalem outros pacotes remotos do Node com facilidade. Vue e outras estruturas de frontend são alguns exemplos de pacotes úteis do Node.

NPM é uma ferramenta poderosa para desenvolver aplicativos JavaScript complexos, com a capacidade de criar e executar scripts de tarefas (para iniciar um servidor de desenvolvimento local, por exemplo) e baixar automaticamente dependências de pacotes de projetos.

Semelhante à verificação de versão do Node, você pode realizar uma verificação de versão do NPM por meio do comando npm da seguinte maneira: npm -v

Para atualizar sua versão do NPM, use o seguinte comando: npm instalar npm@mais recente -g

Com o parâmetro @latest, sua ferramenta NPM atual atualiza automaticamente sua versão para a versão mais recente. Você pode executar npm -v novamente para garantir que seja atualizado corretamente. Você também pode substituir a palavra mais recente para direcionar qualquer versão específica do NPM (no formato xx.xx).

Por exemplo, se você executar o comando npm install npm@6.13.4 -g, a ferramenta terá como alvo o pacote NPM versão 6.13.4 para instalação e atualização.

Versão NPM para este livro

Eu recomendo instalar o NPM versão 7.x, para acompanhar todos os exemplos de código NPM neste livro.

Um projeto Node geralmente depende de uma coleção de pacotes Node1(ou dependências) estejam em funcionamento. No arquivo package.json no diretório do projeto, você pode encontrar esses pacotes instalados. Este arquivo package.json também descreve o projeto, incluindo o nome, autor(es) e outros comandos de script aplicados exclusivamente ao projeto.

Quando você executa o comando npm install (ou npm