Vue Academy · Leçon

Structure du projet généré

Découvrez les fichiers et dossiers générés par un projet Vue

Structure du projet généré est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Visite guidée du projet

Un projet Vue créé à partir d’une structure possède une organisation prévisible des dossiers.

src/ le code source de votre application
public/ les ressources statiques servies telles quelles
package.json les dépendances et les scripts
index.html la page dans laquelle Vue monte l’application

Savoir où se trouvent les éléments vous aide à naviguer rapidement.

Le dossier src

Le dossier src/ contient tout ce que vous écrivez.

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

Point d’entrée main.js

main.js est l’endroit où l’application démarre. Il crée l’application et la monte.

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

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

Composant racine App.vue

App.vue est le composant racine. Tous les autres composants se trouvent à l’intérieur.

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

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

Le dossier components

Le dossier components/ contient les composants réutilisables à fichier unique.

Chaque fichier .vue constitue un composant
Importez-les là où vous en avez besoin
Organisez-les dans des sous-dossiers à mesure que l’application grandit

Le dossier public

Le dossier public/ contient les fichiers statiques copiés tels quels dans la sortie de compilation.

Les fichiers qui s’y trouvent ne sont pas traités par l’outil de regroupement
Utilisez-le pour les favicons, robots.txt ou les ressources fixes
Référencez-les avec des chemins absolus depuis la racine

Point de montage index.html

index.html est l’unique page HTML. Elle contient la cible de montage.

<!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 décrit votre projet et ses dépendances.

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

Scripts de package.json

La section scripts définit les commandes que vous exécutez avec npm run.

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

assets ou public

Deux façons de stocker des fichiers statiques :

src/assets/ traité par l’outil de regroupement, doté d’un hachage pour la mise en cache et importé dans le code
public/ copié tel quel et référencé par un chemin fixe

Utilisez assets pour les éléments que vous importez, et public pour ceux qui doivent conserver une URL stable.

Comment tout s’assemble

Voici le déroulement du chargement de l’application :

Le navigateur charge index.html
Il exécute main.js au moyen d’une balise de script de module
main.js monte App.vue dans #app
App.vue affiche les composants enfants

Vérification rapide

Vérifiez vos connaissances sur la structure d’un projet.

Récapitulatif : structure du projet

Vous avez exploré l’organisation d’un projet Vue :

src/ contient votre code
main.js démarre l’application
App.vue est le composant racine
components/ contient les éléments réutilisables
public/ et index.html servent le contenu statique
package.json définit les dépendances et les scripts

Ensuite : configuration de CLI et ajout d’extensions.

Questions Fréquemment Posées

La leçon « Structure du projet généré » est-elle gratuite ?

Oui — le texte complet de « Structure du projet généré » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Structure du projet généré » ?

Découvrez les fichiers et dossiers générés par un projet Vue Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Structure du projet généré » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Vue Academy