DEV Community: Dieni Kiellermann

Vue 3 para Iniciantes: Dicas que Gostaria de Ter Sabido ao Começar com a Composition API e TypeScript

Dieni Kiellermann — Mon, 08 Jul 2024 19:31:28 +0000

Introdução

Quando comecei a usar o Vue 3 com a Composition API e TypeScript, encontrei algumas dificuldades, mas também descobri várias dicas e truques que fizeram toda a diferença. Se você está começando agora, essas são as dicas que gostaria de ter conhecido desde o início.

O que é a Composition API e seus Benefícios?

A Composition API do Vue 3 é uma forma de gerenciar a lógica dos componentes. Ela oferece mais flexibilidade, organização e reutilização de código. Pense nos componentes Vue como blocos de construção reutilizáveis. A Composition API permite criar esses blocos usando funções, encapsulando lógica e dados de forma modular e organizada. Isso facilita combinar e reutilizar funcionalidades em diferentes partes da sua aplicação, sem duplicar código.

Código mais limpo e organizado: Funções bem definidas tornam o código mais fácil de ler e entender, especialmente em componentes complexos.
Reutilização de código: Crie blocos de funcionalidade reutilizáveis que podem ser facilmente integrados em diferentes componentes.
Maior flexibilidade: A estrutura da Composition API permite organizar o código da maneira que melhor atende às suas necessidades.
Melhor testabilidade: Testar componentes se torna mais fácil com a lógica encapsulada em funções isoladas.

Propriedades Reativas

Propriedades reativas são um dos principais conceitos na Composition API. Elas permitem que você crie variáveis que, quando alteradas, atualizam automaticamente a interface do usuário. Para criar propriedades reativas, você pode usar a função ref:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

No exemplo acima, count é uma propriedade reativa. Qualquer alteração em count.value resultará em uma atualização da interface do usuário.

O que é o TypeScript e qual seu benefício?

TypeScript é uma superestrutura para JavaScript que adiciona tipagem estática ao código. Isso significa que você pode definir os tipos de dados das suas variáveis, funções e outros elementos do código, o que ajuda a evitar erros e torna o código mais fácil de ler e entender.

Melhora na segurança do código: A tipagem estática ajuda a identificar erros de tipo em tempo de compilação, antes que eles causem problemas na execução do aplicativo.
Código mais autoexplicativo: Os tipos definidos no TypeScript fornecem informações adicionais sobre o código, tornando-o mais fácil de entender para você e para outros desenvolvedores.
Melhor refatoração: A tipagem estática facilita a refatoração do código, pois o TypeScript verifica se as alterações que você está fazendo são compatíveis com os tipos definidos.

Começando com a Composition API e TypeScript no Vue 3

Para usar a Composition API e o TypeScript no Vue 3, você precisará configurar seu projeto para usar o TypeScript. Isso pode ser feito com a ajuda de ferramentas como o Vue CLI ou o webpack.

Exemplo de um Componente Simples Usando Composition API e TypeScript

import { ref, computed, ComputedRef } from 'vue';

export default {
  setup() {
    const message: string = ref('Olá, Vue 3!'); // Definindo o tipo de 'message' como string

    const reverseMessage: ComputedRef<string> = computed(() => {
      return message.value.split('').reverse().join('');
    });

    return {
      message,
      reverseMessage
    };
  }
};

Neste exemplo, definimos o tipo de message como string e utilizamos o tipo ComputedRef<string> para indicar que reverseMessage é uma propriedade computada que retorna uma string.

Dicas para Iniciantes

Comece com exemplos simples: Quando comecei, percebi que exemplos básicos me ajudaram a entender a sintaxe e os conceitos da Composition API e do TypeScript. Não tente fazer algo muito complexo logo de cara.
Explore a documentação oficial: A documentação do Vue 3 e do TypeScript oferece tutoriais e exemplos detalhados que foram muito úteis para mim:
- Vue 3 Composition API FAQ
- TypeScript Handbook
Utilize recursos online: Existem muitos tutoriais e cursos online que podem te ajudar a aprender a Composition API e o TypeScript de forma interativa. Eu usei bastante esses recursos.
Pratique e experimente: A melhor maneira de aprender é colocar a mão na massa! Crie seus próprios componentes e experimente diferentes técnicas da Composition API e do TypeScript. Foi assim que aprendi a maior parte do que sei hoje.

O que Evitar

A documentação oficial explica a diferença entre ref e reactive. Reactive é a forma que o Vue disponibiliza para a declaração de dados reativos. Diferentemente de ref, que encapsula o valor do dado em um objeto interno com a propriedade .value, a função reactive() transforma dados do tipo objeto em objetos reativos. No entanto, ref pode ser usado para ambos os casos, mas tem maior chance de causar erros no código devido ao uso ou esquecimento do .value. Portanto, recomenda-se usar sempre ref.
Evite lógica complexa dentro de componentes: Mantenha a lógica complexa fora dos componentes, encapsulando-a em funções utilitárias ou módulos separados.
Não ignore a tipagem no TypeScript: Definir os tipos corretamente desde o início pode evitar muitos problemas no futuro.

Conclusão

A Composition API e o TypeScript são ferramentas poderosas que podem aprimorar seu desenvolvimento com Vue 3. Ao dominar seus conceitos básicos e explorar suas possibilidades, você poderá criar interfaces de usuário mais robustas, organizadas, reutilizáveis e seguras.

Lembre-se: a prática leva à perfeição! Continue experimentando e aprendendo, e você verá seu progresso como desenvolvedor Vue 3.

Desvendando os Segredos dos Pré-Processadores CSS: Domine a Arte da Estilização Web com Sass

Dieni Kiellermann — Mon, 08 Jul 2024 18:44:59 +0000

Introdução

No dinâmico mundo do desenvolvimento web, estilizar com CSS é fundamental para criar interfaces atraentes e funcionais. Mas e se você pudesse ir além do CSS puro e explorar novas possibilidades com pré-processadores? Nesta palestra, vamos explorar o Sass, um dos pré-processadores mais populares e poderosos, e aprender a dominar a arte da estilização web.

O que é o Sass?
O Sass (Syntactically Awesome Stylesheets) é um pré-processador CSS que amplia as capacidades do CSS, tornando seu código mais organizado, eficiente e reutilizável. Ele oferece recursos como variáveis, mixins, funções e aninhamento intuitivo, facilitando a criação e manutenção de estilos complexos.

Benefícios do Sass

Organização e Legibilidade: Reduza a repetição de código e torne seus arquivos CSS mais fáceis de entender e manter.
Reutilização de Código: Crie blocos de código reutilizáveis (mixins) para economizar tempo e garantir consistência em todo o projeto.
Variáveis e Funções: Use variáveis para armazenar valores e funções para realizar cálculos, tornando seu código mais dinâmico e flexível.
Aninhamento Intuitivo: Aninhe seletores de forma intuitiva, facilitando a organização e hierarquia das suas regras de estilo.
Compilação para CSS Puro: O Sass compila seu código em CSS puro, compatível com todos os navegadores.

Explorando os Recursos do Sass

Variáveis

Armazene valores reutilizáveis em variáveis para facilitar a atualização e consistência do código.

$primary-color: #007bff; // Cor primária do tema
$secondary-color: #6c757d; // Cor secundária do tema

Mixins

Crie blocos de código reutilizáveis para evitar repetição e organizar seus estilos.

scss @mixin button($color) { background-color: $color; color: white; padding: 10px 20px; border: none; cursor: pointer; }

Funções

Realize cálculos e operações complexas dentro do seu código CSS.

@function lighten($color, $amount) {
  $hex: str-replace(#, '', $color);
  $red: hex-to-dec($hex[1, 2]);
  $green: hex-to-dec($hex[3, 2]);
  $blue: hex-to-dec($hex[5, 2]);

  $new-red: $red + ($amount * 255);
  $new-green: $green + ($amount * 255);
  $new-blue: $blue + ($amount * 255);

  @return #{$new-red:hex-dec()}{$new-green:hex-dec()}{$new-blue:hex-dec()};
}

Aninhamento Intuitivo

Aninhe seletores de forma mais intuitiva e organizada, facilitando a leitura do código.

.container {
  padding: 20px;
  background-color: $primary-color;

  .header {
    color: white;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .content {
    color: #333;
    line-height: 1.5;
  }
}

Demonstração Prática: Criando um Formulário de Contato com Sass

Criando Variáveis para Cores e Estilos Básicos:

   $primary-color: #007bff; // Cor primária do tema
   $secondary-color: #6c757d; // Cor secundária do tema
   $text-color: #333; // Cor do texto
   $font-family: 'Arial', sans-serif;

   $form-padding: 20px;
   $form-border-radius: 5px;
   $form-border: 1px solid #ccc;
   $input-padding: 10px;
   $input-border: 1px solid #ccc;
   $input-border-radius: 4px;
   $button-padding: 10px 20px;
   $button-border: none;
   $button-border-radius: 4px;

Estilizando o Formulário:

   .form {
     padding: $form-padding;
     border: $form-border;
     border-radius: $form-border-radius;
   }

Estilizando os Rótulos:

   .form label {
     display: block;
     margin-bottom: 5px;
     font-weight: bold;
   }

Estilizando os Campos de Entrada:

   .form input[type="text"],
   .form input[type="email"],
   .form input[type="password"] {
     width: 100%;
     padding: $input-padding;
     border: $input-border;
     border-radius: $input-border-radius;
     margin-bottom: 10px;
   }

Estilizando o Botão de Enviar:

   .form button {
     background-color: $primary-color;
     color: white;
     padding: $button-padding;
     border: $button-border;
     border-radius: $button-border-radius;
     cursor: pointer;
   }

Estilizando o Foco nos Campos de Entrada:

.form input[type="text"]:focus,
   .form input[type="email"]:focus,
   .form input[type="password"]:focus {
     outline: none;
     border-color: $primary-color;

Estilizando o Botão de Enviar com Hover:



   .form button:hover {
     background-color: darken($primary-color, 10%);
   }

Estilizando Mensagens de Erro:

scss .form .error { color: red; margin-bottom: 10px; }`

Conclusão

Nesta demonstração prática, construímos um formulário de contato completo utilizando o Sass. Vimos como as variáveis, mixins e funções do Sass podem simplificar e otimizar o processo de estilização, resultando em um código mais organizado, eficiente e reutilizável.
`

Manual Git e Github para iniciantes

Dieni Kiellermann — Wed, 06 Dec 2023 13:26:08 +0000

Manual Git e GitHub

Este guia fornecerá instruções passo a passo desde a criação de uma conta no GitHub até a execução de comandos básicos e avançados com o Git. Vamos lá!

1. Criando uma Conta no GitHub:

Acesse GitHub.
Clique em "Sign up" para criar uma nova conta.
Preencha as informações necessárias e siga as instruções para verificar seu e-mail.

2. Criando um Repositório no GitHub:

Faça login na sua conta GitHub.
Clique em "New" no canto superior direito.

Preencha os detalhes do repositório e clique em "Create repository", lembre de selecionar a opção de adicionar um arquivo README.

Copie a URL do repositório, você precisará dela para clonar o repositório localmente.

3. Instalando o Git no Computador:

Windows:

Baixe o instalador do Git para Windows aqui.
Execute o instalador e siga as instruções.

Linux:

Debian/Ubuntu:

  sudo apt-get update
  sudo apt-get install git

Fedora:

  sudo dnf install git

Arch Linux:

  sudo pacman -S git

4. Configurando o Git:

. Configure seu nome e e-mail globalmente:

   git config --global user.name "Seu Nome"
   git config --global user.email "seu@email.com"

3. Clonando o Repositório Localmente e Editando o README:

Abra o terminal no seu computador.
Use o comando git clone URL-do-repositorio para clonar o repositório para sua máquina.
Navegue até o diretório do repositório clonado:

   cd nome-do-repositorio

Abra o arquivo README.md em um editor de texto de sua escolha e faça algumas alterações.

Editando o README e Criando uma Nova Branch:

Edite o README.md e adicione qualquer conteúdo desejado.
Salve as alterações no arquivo.

Verificando o Status e Criando uma Nova Branch:

Execute o comando git status para ver as mudanças no seu repositório.
Você verá que há alterações no README.md.
Crie uma nova branch para trabalhar com suas alterações:

   git checkout -b minha-nova-branch

Adicionando, Comitando e Enviando Alterações:

Adicione todas as alterações ao próximo commit:

   git add .

Faça o commit das alterações:

   git commit -m "Adicionando conteúdo ao README"

Envie as alterações para o GitHub:

   git push origin minha-nova-branch

Agora você criou uma nova branch, fez alterações no README e enviou essas alterações de volta para o repositório no GitHub. Essa é uma prática comum ao trabalhar em equipes ou ao implementar novos recursos. Certifique-se de substituir "minha-nova-branch" por um nome significativo para a sua branch.

6. Navegando até o Repositório Clonado:

cd nome-do-repositorio

7. Comandos Básicos do Git:

Status e Mudanças:

git status: Mostra o estado atual do seu repositório.
git add arquivo: Prepara um arquivo para o próximo commit.
git diff: Exibe as diferenças nas alterações.

Commits:

git commit -m "Mensagem do commit": Registra as mudanças.
git log: Exibe o histórico de commits.

Ramos (Branches):

git branch nome-do-ramo: Cria um novo ramo.
git checkout nome-do-ramo: Muda para um ramo específico.
git merge nome-do-ramo: Combina alterações de um ramo de volta ao principal.

8. Comandos Avançados do Git:

Remoto:

git remote add origin URL: Conecta seu repositório local ao repositório remoto.
git push origin nome-do-ramo: Envia alterações para o repositório remoto.
git pull origin nome-do-ramo: Recebe alterações do repositório remoto.

Desfazer Alterações:

git checkout -- arquivo: Desfaz alterações não confirmadas.
git reset HEAD~1: Desfaz o commit mais recente.
git revert SHA-do-commit: Desfaz um commit existente.

GitHub:

Siga as instruções no site para criar Pull Requests, Issues, e explorar recursos colaborativos.

Este guia abrange desde a criação de uma conta no GitHub até a execução de comandos avançados com o Git. Explore a documentação oficial do Git e GitHub para aprender mais: Git Documentation, GitHub Documentation.

Se você gostou deste guia e achou útil, ficaria muito grata se pudesse dar uma estrela ao repositório correspondente no GitHub. O repositório está disponível em ManualGit, e o conteúdo deste artigo está incluído no arquivo README.

Link para dar uma estrela: ManualGit Repository

Do Vue Cli para o Vite utilizando Vue2

Dieni Kiellermann — Tue, 28 Feb 2023 11:27:45 +0000

Por que isso é importante?

O Vue CLI e o Vite são ferramentas de desenvolvimento web que auxiliam na criação de projetos Vue. Enquanto o Vue CLI é uma ferramenta de linha de comando que ajuda a gerenciar projetos, o Vite é uma ferramenta de compilação e desenvolvimento que oferece uma experiência de desenvolvimento mais rápida.

Atualizar do Vue CLI para o Vite usando o Vue 2 pode trazer melhorias significativas para a experiência de desenvolvimento. O Vite usa um servidor de desenvolvimento extremamente rápido que proporciona atualizações instantâneas sem precisar reconstruir todo o projeto. Além disso, o Vite é capaz de otimizar a compilação do projeto, resultando em um tempo de compilação mais rápido e em arquivos gerados menores.

Em resumo, atualizar para o Vite pode levar a um desenvolvimento mais eficiente e rápido do projeto Vue, proporcionando uma experiência mais fluida e produtiva para os desenvolvedores.

Passo 1

Como fazer a migração

O primeiro passo para migrar para o Vite é atualizar as dependências no arquivo package.json. Para fazer isso, é necessário remover as dependências relacionadas ao Vue CLI, tais como "@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-plugin-router", "@vue/cli-plugin-vuex" e "@vue/cli-service". Além disso, também é possível remover o "sass-loader", uma vez que o Vite já fornece suporte integrado para pré-processadores mais comuns.

 // package.json
"@vue/cli-plugin-babel": "~4.0.0", // remove
"@vue/cli-plugin-eslint": "~4.0.0", // remove
"@vue/cli-plugin-router": "~4.0.0", // remove
"@vue/cli-plugin-vuex": "~4.0.0", // remove
"@vue/cli-service": "~4.0.0", // remove
"sass-loader": "^8.0.2" // remove
-

Em seguida, adicionamos o Vite e o plug-in do Vue para o Vite como dependências, usando as seguintes linhas:

"vite": "^4.1.0"
"@vitejs/plugin-legacy": "^4.0.1",

Como estamos migrando um projeto Vue 2, também precisamos incluir o plug-in Vite mantido pela comunidade para Vue 2. Adicionamos o seguinte trecho ao package.json:

"@vitejs/plugin-vue2": "^2.2.0"

Com os plug-ins do Vite instalados, podemos remover a seguinte linha do package.json:

//remove
"vue-template-compiler": "^2.6.11"

Depois de atualizar as dependências no arquivo package.json, precisamos executar o comando "npm install" ou "yarn install" para instalar as dependências atualizadas.

É necessario remover completamente o Babel de nossas dependências, podemos começar excluindo o arquivo babel.config.js. Além disso, podemos remover outras dependências relacionadas ao Babel do package.json, como babel-eslint e core-js, uma vez que já removemos a dependência @vue/cli-plugin-babel, que requer o próprio Babel.

Com babel-eslint removido, também precisamos removê-lo do nosso arquivo .eslintrc.

Então no arquivo .eslintrc

// remove parser options
parserOptions: {
    parser: "babel-eslint",
},

env: {
    node: true, // remove
    es2021: true, //atualize o nó para es2021
}

Essa mudança exige que atualizemos o eslint e o eslint-plugin-vue para suportar o ambiente es2021.

Para realizar essas alterações, podemos executar o seguinte comando:

$ npm install eslint@8 eslint-plugin-vue@8

Passo 2

Configurando o Vite na raiz do projeto

Vamos criar na raiz do nosso projeto um arquivo chamado vite.config.js. Esse arquivo é responsável por configurar o Vite para o projeto Vue.js. Vamos analisar linha por linha:

import vue2 from "@vitejs/plugin-vue2";
//Aqui, o pacote @vitejs/plugin-vue2 é importado e atribuído à variável vue2. Esse plugin é necessário para suportar componentes Vue 2 no Vite.

import { fileURLToPath, URL } from "node:url"
Essa linha importa as funções fileURLToPath e URL do módulo node:url. Essas funções são usadas para manipular caminhos de arquivos no código.

export default defineConfig({

  plugins: [
    vue2(),
  ],
  resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
   },
})

Aqui, o objeto de configuração é exportado como o padrão. As chaves dentro dele, como plugins e resolve, são usadas para definir variáveis, plugins e opções de resolução de caminho. O Vite precisa das extensões dos arquivos, se o seu projeto for grande como o meu, é prático utilizar esse extensions, caso contrario, atualize manualmente seus imports com as extensoes dos seus arquivos.

Passo 3

Movendo o index.html

Agora, vamos mover o arquivo index.html que contém nosso aplicativo Vue.js da pasta public para a raiz do projeto, porque o Vite coloca o arquivo index.html na raiz do projeto e não no diretório público como o Vue CLI faz.
Após fazer isso, dentro do arquivo index.js precisam ocorrer as seguintes substituições:

// index.html

<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">

Por fim, o JavaScript não será mais injetado automaticamente, então precisamos incluí-lo manualmente no arquivo index.html usando uma tag de script com o atributo type="module" e apontando para o caminho correto do arquivo main.js que está em /src/main.js.

 <script type="module" src="/src/main.js"></script>

Passo 4

Atualizando as variáveis de ambiente

Precisamos atualizar as variáveis de ambiente usadas pelo nosso projeto. As variáveis de ambiente são informações que o projeto pode usar para se adaptar a diferentes situações. No Vite, podemos usar um arquivo chamado .env para armazenar essas informações.

No entanto, há uma diferença importante no Vite em relação ao Vue CLI: agora, em vez de usar process.env para acessar essas variáveis, precisamos usar import.meta.env. Além disso, se você costumava usar variáveis de ambiente com o prefixo VUE_APP_, precisará alterá-las para usar o prefixo VITE_.

base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL

 "BACK_API": "$VUE_APP_BACK_API", ///remove
  "BACK_API": "$VITE_BACK_API", ///faça isso em todos os locais semelhantes

Passo 5

Atualizando os scripts

Para usar o Vite, precisamos atualizar algumas coisas no nosso arquivo de configuração chamado package.json. Isso inclui atualizar os comandos que usamos para desenvolver e construir nosso aplicativo.

Antes, quando usávamos o Vue CLI, usávamos os comandos "serve" e "build", mas agora com o Vite, usamos "dev" e "build". Também precisamos atualizar o comando "serve" para "preview" se quisermos visualizar a compilação de produção localmente.

// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview"

Após isso, execute npm run dev e veja no terminal se o vite está rodando, caso ele dê erro, veja se o erro está incluido no próximo passo.

Erros que podem acontecer durante a migração e como resolver

Failed to resolve entry for package "fs"

O erro Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.' geralmente acontece porque o código está tentando acessar o pacote "fs" em um ambiente que não tem acesso ao sistema de arquivo, a solução para ele não se encontra nas documentações oficiais. Para resolver esse erro, vamos adicionar a seguinte linha no nosso package.json

///package.json
dependencies{
    "rollup-plugin-node-builtins": " ^2.1.2 "}
}

e no nosso arquivo vite.config.js adicionaremos o seguinte:

resolve: {
  alias: {
    fs: require.resolve('rollup-plugin-node-builtins'),

Com isso, o seu erro irá sumir rapidamente, lembre-se sempre de dar o npm install ou yarn install, para adicionar os pacotes no projeto.

Process is not defined

Outro erro comum, porem com a resolução dificil de encontrar, é o ReferenceError: process is not defined, ele ocorre pela ausencia de de uma definição global para process, então, no arquivo vite.config.js, adicione a seguinte linha

 define: {
    'process.env': {},
  },

Espero que esse artigo tenha sido útil, no próximo iremos abordar a nova configuração do plugin i18n no projeto, para implementação de traduções.