L'outil create-vue est le succeseur officiel de Vue CLI pour l'initialisation de projets Vue.js 3. Reposant sur Vite, il offre une expérience de développement nettement plus fluide grâce à un démarrage quasi instantané du serveur et un rechargement à chaud (HMR) extrêmement rapide.

Contrairement à l'ancienne approche de Vue CLI, create-vue se contente de générer une structure de projet préconfigurée selon vos besoins, puis délègue toute la gestion de la construction et de l'exécution à Vite.

Prérequis : L'utilisation de create-vue nécessite une version de Node.js supérieure ou égale à 16.0.

Initialisation d'un nouveau projet

Il existe deux méthodes principales pour utiliser create-vue afin de générer un projet Vue 3.

1. Installation globale de l'outil

Vous pouvez installer le paquet de manière permanente sur votre système :

npm i create-vue@latest -g

Ensuite, lancez la création via la commande suivante :

create-vue mon-application-vue

2. Utilisation via npm init (Recommandé)

Cette méthode est plus courante car elle ne nécessite pas d'installation globale. Elle télécharge et exécute la dernière version du script de manière éphémère :

npm init vue@latest

Lors de l'exécution, un assistant interactif vous guidera à travers plusieurs options de configuration :

✔ Nom du projet : … mon-projet-demo
✔ Ajouter TypeScript ? … Non / Oui
✔ Ajouter le support JSX ? … Non / Oui
✔ Ajouter Vue Router pour le développement d'une SPA ? … Non / Oui
✔ Ajouter Pinia pour la gestion d'état ? … Non / Oui
✔ Ajouter Vitest pour les tests unitaires ? … Non / Oui
✔ Ajouter une solution de test de bout en bout (E2E) ? › Pas de sélection
✔ Ajouter ESLint pour la qualité du code ? … Non / Oui

Anatomie d'un projet Vue 3

Une fois le projet généré, la structure des dossiers se présente généralement comme suit :

mon-projet-demo/         # Racine du projet
├── public/              # Ressources statiques servies telles quelles (ex: favicon)
├── src/                 # Code source de l'application
│   ├── assets/          # Images, styles globaux et polices
│   ├── components/      # Composants Vue réutilisables
│   ├── views/           # Composants de pages (utilisés avec le routeur)
│   ├── App.vue          # Composant racine de l'application
│   └── main.js          # Point d'entrée JavaScript (ou main.ts en TypeScript)
├── index.html           # Point d'entrée HTML principal
├── package.json         # Dépendances et scripts npm
├── vite.config.js       # Configuration spécifique à Vite
└── README.md            # Documentation du projet

Commandes de cycle de vie

Les scripts disponibles dans le fichier package.json permettent de gérer le projet :

• dev : Lance le serveur de développement local.
• build : Compile et minimise le projet pour la mise en production.
• preview : Permet de tester localement le build de production.

Configuration avancée avec vite.config.js

Le fichier vite.config.js centralise la configuration de votre environnement. Voici une analyse des options les plus couramment modifiées :

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Personnalisation des dossiers de sortie

Pour modifier le dossier de destination de la compilation (par défaut dist) et le sous-répertoire des ressources :

export default defineConfig({
  build: {
    outDir: 'production-build',
    assetsDir: 'static-files'
  }
})

Gestion du chemin de base (Base Path)

Si votre application n'est pas déployée à la racine de votre domaine, utilisez l'option base :

export default defineConfig({
  base: '/mon-application/' // Utile pour un déploiement sur une sous-route
})

Configuration des alias de chemin

Les alias simplifient les importations au sein de votre code :

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
    '@ui': fileURLToPath(new URL('./src/components', import.meta.url))
  }
}

Cela permet d'importer un composant ainsi : import Bouton from '@ui/Bouton.vue'.

Options du serveur de développement

Pour modifier l'hôte ou le port du serveur local :

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true, // Ouvre le navigateur automatiquement
    proxy: {
      '/api': 'http://backend-api.local'
    }
  }
})

Comparaison : Vite vs Webpack

L'abandon de Webpack (utilisé par Vue CLI) au profit de Vite (utilisé par create-vue) marque un changement technique majeur :

• Approche de build : Webpack construit un bundle complet en analysant toutes les dépendances avant de démarrer. À l'inverse, Vite utilise les ES Modules natifs du navigateur pour charger uniquement le code nécessaire à la page en cours.
• Vitesse : Grâce à l'utilisation de Go (via esbuild) pour le pré-bundling des dépendances, Vite est 10 à 100 fois plus rapide que les outils basés sur JavaScript lors de la phase de démarrage.
• Support natif : Vite gère nativement le TypeScript, le JSX et le CSS sans nécessiter une configuration complexe de loaders, contrairement à Webpack.
• Production : En production, Vite utilise Rollup pour générer des assets optimisés, garantissant une performance maximale.

Bien que Webpack reste une solution extrêmement stable et riche en plugins pour les projets historiques, Vite représente désormais le standard pour tout nouveau développement avec Vue.js.