Vue Academy · Lezione

Struttura del progetto generato

Esplori i file e le cartelle generati da un progetto Vue.

Struttura del progetto generato è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Un tour del progetto

Un progetto Vue creato tramite uno scaffolding ha una struttura di cartelle prevedibile.

src/ contiene il codice sorgente dell'applicazione
public/ contiene gli asset statici serviti così come sono
package.json contiene dipendenze e script
index.html è la pagina in cui Vue esegue il mount

Sapere dove si trovano i vari elementi aiuta a orientarsi rapidamente.

La cartella src

La cartella src/ contiene tutto ciò che scrive.

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

Punto di ingresso main.js

main.js è il punto in cui l'applicazione viene avviata. Qui viene creata e viene eseguito il mount.

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

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

Componente radice App.vue

App.vue è il componente radice. Tutti gli altri componenti si trovano al suo interno.

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

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

La cartella components

La cartella components/ contiene i Single-File Components riutilizzabili.

Ogni file .vue è un componente
Li importi dove ne ha bisogno
Li organizzi in sottocartelle man mano che l'applicazione cresce

La cartella public

La cartella public/ contiene file statici copiati così come sono nell'output della build.

I file presenti qui non vengono elaborati dal bundler
La utilizzi per favicon, robots.txt o asset fissi
Li referenzi con percorsi assoluti dalla radice

Punto di mount di index.html

index.html è l'unica pagina HTML. Contiene l'elemento di mount.

<!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

package.json descrive il progetto e le relative dipendenze.

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

Script di package.json

La sezione scripts definisce i comandi eseguiti con npm run.

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

assets e public

Esistono due modi per archiviare i file statici:

src/assets/ viene elaborata dal bundler, utilizza hash per la memorizzazione nella cache e può essere importata nel codice
public/ viene copiata così com'è e referenziata tramite un percorso fisso

Utilizzi assets per gli elementi da importare e public per quelli che devono mantenere un URL stabile.

Come si integra il tutto

Questo è il flusso di caricamento dell'applicazione:

Il browser carica index.html
Esegue main.js tramite un tag script di tipo module
main.js esegue il mount di App.vue in #app
App.vue esegue il rendering dei componenti figli

Verifica rapida

Verifichi la conoscenza della struttura del progetto.

Riepilogo: struttura del progetto

Ha esplorato la struttura di un progetto Vue:

src/ contiene il codice
main.js avvia l'applicazione
App.vue è il componente radice
components/ contiene le parti riutilizzabili
public/ e index.html forniscono i contenuti statici
package.json definisce dipendenze e script

Prossimo argomento: configurare la CLI e aggiungere plugin.

Domande Frequenti

La lezione «Struttura del progetto generato» è gratuita?

Sì — il testo completo di «Struttura del progetto generato» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Struttura del progetto generato»?

Esplori i file e le cartelle generati da un progetto Vue. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Struttura del progetto generato»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy