Structure d'un Projet Vue.js : Le Tour du Propriétaire 🏠

Bon, t'as créé ton projet Vue avec npm create vue@latest et maintenant tu regardes ce bordel de fichiers en te demandant "mais qu'est-ce que c'est que ce bazar ?" 🫠 Pas de panique, on va tout décortiquer.

L'Arborescence : Qui Fait Quoi ? 📁

Regarde ce screenshot. C'est l'architecture standard d'un projet Vue + Vite. Chaque dossier a son rôle, et si tu comprends pas ça, ton app va finir en spaghetti code garanti. 🤡

intro-vue/
├── public/              # Fichiers statiques (servis tels quels)
│   └── favicon.ico      # La petite icône dans l'onglet du navigateur
│
├── src/                 # TON CODE (c'est là que tu vis)
│   ├── assets/          # Images, fonts, CSS globaux
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   │
│   ├── components/      # Tes composants Vue réutilisables
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   │
│   ├── App.vue          # Composant racine (le big boss)
│   └── main.js          # Point d'entrée JavaScript
│
├── index.html           # Point d'entrée HTML
├── package.json         # Config du projet + dépendances
├── vite.config.js       # Config de Vite (build tool)
├── eslint.config.js     # Config du linter (police du code)
└── README.md            # Doc que personne lit jamais

Les Fichiers Clés : Explication de Code 🔑

1. `index.html` : Le Fondation de Tout

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

Ce qui se passe ici :

<div id="app"></div> : C'est la cible. Vue va "monter" ton application ici. Ce div vide va devenir ton app entière. 🎯
<script type="module" src="/src/main.js"></script> : Charge main.js en tant que module ES6. C'est le déclencheur de toute ta app.
Le reste : du HTML basique. viewport pour le responsive, favicon pour l'icône.

Point crucial : Ce fichier reste quasi vide. Tout le contenu dynamique vient de Vue qui injecte du HTML dans #app.

2. `main.js` : Le Chef d'Orchestre 🎼

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

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

Décryptage ligne par ligne :

Ligne 1 : import './assets/main.css'
→ Importe les styles CSS globaux. Ça stylise toute ton app dès le départ.

Ligne 2 : import { createApp } from 'vue'
→ Importe la fonction createApp depuis Vue. C'est LE truc qui crée une instance d'application Vue. Sans ça, pas de magie. 🧙‍♂️

Ligne 3 : import App from './App.vue'
→ Importe ton composant racine App.vue. C'est le conteneur principal de toute ton app.

Ligne 4 : createApp(App).mount('#app')
→ BOOM 💥, là c'est le moment magique :

createApp(App) : Crée une instance d'app Vue avec App.vue comme composant racine
.mount('#app') : Monte cette app dans l'élément HTML avec l'id app (celui de index.html)

En gros : Ce fichier dit à Vue "Yo, prends mon composant App.vue, transforme-le en application web, et colle-le dans <div id="app"> du HTML". Simple comme bonjour. 😎

3. `package.json` : Le CV de Ton Projet 📄

{
  "name": "intro-vue",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --cache"
  },
  "dependencies": {
    "vue": "^3.5.22"
  },
  "devDependencies": {
    "@eslint/js": "^9.37.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "eslint": "^9.37.0",
    "eslint-plugin-vue": "~10.5.0",
    "globals": "^16.4.0",
    "vite": "^7.1.11",
    "vite-plugin-vue-devtools": "^8.0.3"
  }
}

Décryptage section par section :

Métadonnées de Base

"name" : Nom du projet (change-le selon ton projet, pas besoin de garder "intro-vue")
"version" : Numéro de version (suit le Semantic Versioning)
"private": true : Empêche de publier ce package accidentellement sur npm
"type": "module" : Indique qu'on utilise les modules ES6 (import/export moderne)

Engines

"engines": {
  "node": "^20.19.0 || >=22.12.0"
}

→ Spécifie les versions de Node.js compatibles. Si ton Node est trop vieux, ça va gueuler. 👴

Scripts (les commandes que tu vas utiliser tous les jours)

"scripts": {
  "dev": "vite",                    // Lance le serveur de dev
  "build": "vite build",            // Build pour la prod
  "preview": "vite preview",        // Prévisualise le build de prod localement
  "lint": "eslint . --fix --cache"  // Vérifie et corrige le code
}

Tu lances ces scripts avec npm run <nom-du-script>. Exemples :

npm run dev → Lance ton projet en mode développement (localhost:5173)
npm run build → Crée une version optimisée pour la production dans /dist
npm run lint → Vérifie ton code avec ESLint et corrige les erreurs basiques

Dependencies (ce dont ton app a BESOIN pour fonctionner)

"dependencies": {
  "vue": "^3.5.22"
}

→ Ton app dépend de Vue.js version 3.5.22 (ou compatible). C'est la seule dépendance de prod ici parce que c'est un projet minimal. Dans un vrai projet, t'auras Vue Router, Pinia, etc.

DevDependencies (outils de développement uniquement)

"devDependencies": {
  "@eslint/js": "^9.37.0",              // ESLint (linter JS)
  "@vitejs/plugin-vue": "^6.0.1",       // Plugin Vite pour Vue
  "eslint": "^9.37.0",                  // ESLint core
  "eslint-plugin-vue": "~10.5.0",       // Règles ESLint spécifiques à Vue
  "globals": "^16.4.0",                 // Définitions globales pour ESLint
  "vite": "^7.1.11",                    // Vite (build tool ultra rapide)
  "vite-plugin-vue-devtools": "^8.0.3"  // DevTools Vue intégrés
}

Ces packages servent uniquement pendant le développement. Ils ne sont pas inclus dans ton build final de production. ⚙️

Le Flux d'Exécution : Comment Tout Se Lance 🚦

Quand tu fais npm run dev, voici ce qui se passe dans l'ordre :

Vite démarre un serveur de développement
Le navigateur charge index.html
index.html charge main.js
main.js importe App.vue et le monte dans #app
App.vue importe ses composants enfants (HelloWorld, TheWelcome, etc.)
Vue rend tout ça en HTML dynamique dans le navigateur
Tu vois ton app sur http://localhost:5173 ✨

En une phrase : index.html → main.js → App.vue → Composants → Boom, ton site est live. 💪

Les Dossiers en Détail 📂

`src/` : Ton Terrain de Jeu

assets/ : Mets ici tes images, fonts, CSS globaux. Tout ce qui est "statique" mais qui peut être importé dans des composants.
components/ : Tes composants Vue réutilisables. Genre des boutons, des cards, des modals, etc. Organise ça proprement sinon ça va vite devenir un dépotoir. 🗑️
App.vue : Le composant racine. Généralement, il contient le layout global (header, footer, navigation) et un <router-view> si tu utilises Vue Router.
main.js : Point d'entrée JS. On en a déjà parlé.

`public/` : Fichiers Servis Tels Quels

Tout ce qui est dans public/ est copié tel quel dans le build final. Pas de traitement, pas d'optimisation. Utilise ça pour :

favicon.ico (l'icône du site)
robots.txt (pour les moteurs de recherche)
Des fichiers statiques que tu veux servir directement (PDFs, etc.)

Attention : Les fichiers dans public/ sont accessibles via /nomfichier.ext (racine du site). N'y mets pas de trucs sensibles. 🔒

Config Files : Les Machins Chiants Mais Importants 🛠️

`vite.config.js`

Configure Vite (le build tool). Par défaut, c'est minimal :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

Tu peux customiser plein de trucs ici (alias de chemins, proxy API, etc.). Pour l'instant, laisse ça tranquille. 😴

`eslint.config.js`

Configure ESLint (le flic du code). Il vérifie que ton code respecte des standards de qualité. Si tu fais de la merde, ESLint va gueuler avec des lignes rouges dans VSCode. C'est ton ami (qui te tape sur les doigts). 👮‍♂️

App.vue : Anatomie du Composant Principal 🔬

Prenons l'exemple du fichier App.vue généré par défaut :

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    /* ... */
  }
}
</style>

Ce qui se passe :

Import de 2 composants : HelloWorld et TheWelcome
Un <header> avec le logo Vue et le composant HelloWorld
Un <main> avec le composant TheWelcome
Du style scoped (limité à ce composant uniquement)

C'est la structure de base d'un projet Vue. Tu peux virer tout ça et commencer à coder ton propre truc. 💪

TL;DR (Parce Que T'as la Flemme) 🍿

index.html : Point d'entrée HTML avec <div id="app"> (cible de Vue)
main.js : Point d'entrée JS. Crée l'app Vue et la monte dans #app
App.vue : Composant racine de ton app
package.json : Config du projet (dépendances, scripts)
src/ : Ton code (composants, assets, etc.)
public/ : Fichiers statiques servis tels quels
Flux : index.html → main.js → App.vue → Composants enfants

Maintenant arrête de regarder des screenshots et va coder, champion. Le code se lit pas, il s'écrit. 🔥

Structure d'un Projet Vue.js : Le Tour du Propriétaire 🏠

L'Arborescence : Qui Fait Quoi ? 📁#

Les Fichiers Clés : Explication de Code 🔑#

1. index.html : Le Fondation de Tout#

2. main.js : Le Chef d'Orchestre 🎼#

3. package.json : Le CV de Ton Projet 📄#

Métadonnées de Base#

Engines#

Scripts (les commandes que tu vas utiliser tous les jours)#

Dependencies (ce dont ton app a BESOIN pour fonctionner)#

DevDependencies (outils de développement uniquement)#

Le Flux d'Exécution : Comment Tout Se Lance 🚦#

Les Dossiers en Détail 📂#

src/ : Ton Terrain de Jeu#

public/ : Fichiers Servis Tels Quels#

Config Files : Les Machins Chiants Mais Importants 🛠️#

vite.config.js#

eslint.config.js#

App.vue : Anatomie du Composant Principal 🔬#

TL;DR (Parce Que T'as la Flemme) 🍿#