Vue Academy · Aula

Estrutura do projeto gerado

Explore os arquivos e as pastas gerados por um projeto Vue.

Estrutura do projeto gerado é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Conhecendo o projeto

Um projeto Vue com a estrutura inicial criada tem uma organização previsível de pastas.

src/ o código-fonte da sua aplicação
public/ recursos estáticos disponibilizados sem alterações
package.json dependências e scripts
index.html a página na qual o Vue é montado

Saber onde as coisas ficam ajuda você a navegar rapidamente.

A pasta src

A pasta src/ contém tudo o que você escreve.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

Ponto de entrada main.js

O main.js é onde a aplicação é iniciada. Ele cria a aplicação e a monta.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

Componente raiz App.vue

O App.vue é o componente raiz. Todos os outros componentes ficam dentro dele.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

A pasta components

A pasta components/ contém Componentes de Arquivo Único reutilizáveis.

Cada arquivo .vue é um componente
Importe-os onde precisar
Organize-os em subpastas à medida que a aplicação cresce

A pasta public

A pasta public/ contém arquivos estáticos copiados sem alterações para o resultado da compilação.

Os arquivos nessa pasta não são processados pelo empacotador
Use-a para favicons, robots.txt ou recursos fixos
Faça referência a eles usando caminhos absolutos a partir da raiz

Ponto de montagem de index.html

O index.html é a única página HTML. Ele contém o destino da montagem.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

O package.json descreve seu projeto e suas dependências.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Scripts do package.json

A seção scripts define os comandos que você executa com npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets x public

Há duas maneiras de armazenar arquivos estáticos:

src/assets/ processados pelo empacotador, recebem um hash para armazenamento em cache e são importados no código
public/ copiados sem alterações e referenciados por um caminho fixo

Use assets para aquilo que você importa e public para aquilo que precisa manter uma URL estável.

Como tudo se encaixa

O fluxo quando a aplicação é carregada:

O navegador carrega o index.html
Ele executa o main.js por meio de uma tag de script de módulo
O main.js monta o App.vue em #app
O App.vue renderiza os componentes filhos

Verificação rápida

Teste seus conhecimentos sobre a estrutura do projeto.

Recapitulação: estrutura do projeto

Você explorou a organização de um projeto Vue:

src/ contém seu código
main.js inicia a aplicação
App.vue é o componente raiz
components/ contém partes reutilizáveis
public/ e index.html disponibilizam conteúdo estático
package.json define as dependências e os scripts

A seguir: configuraremos o CLI e adicionaremos plug-ins.

Perguntas Frequentes

A aula “Estrutura do projeto gerado” é grátis?

Sim — o texto completo de “Estrutura do projeto gerado” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Estrutura do projeto gerado”?

Explore os arquivos e as pastas gerados por um projeto Vue. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Estrutura do projeto gerado”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy