Arquitetura de Diretórios em Projetos Vue 3

Ao iniciar um projeto moderno utilizando Vue 3 e Vite, é fundamental compreender a finalidade de cada diretório e arquivo para manter uma base de código organizada e escalável. Abaixo, detalhamos os principais componentes da estrutura padrão:

• .vscode: Contém configurações específicas para o editor Visual Studio Code, permitindo padronizar extensões recomendadas e comportamentos do editor para a equipe.
• node_modules: Repositório das dependências e pacotes instalados via gerenciadores como npm ou yarn.
• public: Destinado a recursos estáticos que não passam pelo processo de compilação (compilação/minificação). Os arquivos aqui são copiados diretamente para a raiz do diretório de build e devem ser acessados via caminhos absolutos.
• src: O núcleo do projeto, onde reside todo o código-fonte desenvolvido.
  • src/assets: Armazena recursos estáticos que serão processados pelo Webpack ou Vite, como imagens e arquivos CSS globais. Devem ser referenciados através de caminhos relativos.
  • src/components: Local onde são armazenados os componentes reutilizáveis da interface (.vue).
  • src/App.vue: O componente raiz da aplicação, que serve como container principal.
  • src/main.js: Ponto de entrada do JavaScript, responsável por instanciar a aplicação Vue e montar o DOM.
• index.html: O arquivo HTML principal e o ponto de entrada da aplicação para o navegador.
• package.json: Manifesto do projeto que lista as dependências, scripts de automação e metadados.
• vite.config.js: Arquivo de configuração do Vite para definir aliases, plugins e comportamento do servidor de desenvolvimento.

Padrões de Criação de Componentes (SFC)

O Vue 3 oferece flexibilidade na forma como definimos a lógica dos componentes. A seguir, exploramos as três abordaegns principais.

1. Utilizando a Sintaxe <script setup> (Recomendado)

Esta é a forma mais moderna e concisa de trabalhar com a Composition API. Ela reduz o código repetitivo (boilerplate) e melhora a performance.

<!-- components/Saudacao.vue -->
<template>
  <div class="container">
    <h1>Mensagem do Sistema</h1>
    <p>{{ status }}</p>
  </div>
</template>

<script setup>
  const status = 'Aplicação operando normalmente';
</script>

Para utilizar este componente no arquivo principal App.vue, basta importá-lo e declará-lo no template:

<template>
  <main>
    <WidgetSaudacao />
  </main>
</template>

<script setup>
  import WidgetSaudacao from './components/Saudacao.vue';
</script>

2. Abordagem via Options API

Este estilo é familiar para desenvolvedores que vêm do Vue 2. Ele organiza o código em objetos baseados em propriedades como data, methods e computed.

<template>
  <div>
    <span>{{ feedback }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedback: "Processamento concluído com sucesso."
    }
  }
}
</script>

3. Composition API com a Função setup()

Uma forma intermediária que utiliza a Composition API de maneira explícita, exigindo o retorno manual das variáveis que devem ser expostas ao template.

<template>
  <p>Valor atual: {{ info }}</p>
</template>

<script>
export default {
  setup() {
    const info = "Dados carregados da API";
    
    return {
      info
    }
  }
}
</script>