Vue Academy · Leçon

Installation de Vue CLI

Installez et utilisez Vue CLI pour créer de nouveaux projets

Installation de Vue CLI est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Qu’est-ce que Vue CLI ?

Vue CLI est l’outil classique en ligne de commande servant à créer et à gérer des projets Vue.

Crée des projets avec des valeurs par défaut judicieuses
Gère la configuration de compilation au moyen d’extensions
Repose sur webpack

Il a été la référence pendant des années, même si Vue moderne privilégie désormais Vite.

Installation globale de Vue CLI

Installez CLI globalement afin que la commande vue soit disponible partout.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Création d’un projet

Utilisez vue create pour créer la structure d’un nouveau projet. Vous lui fournissez un nom de projet.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Choix des préréglages

CLI vous demande de choisir un préréglage :

Par défaut fournit Babel et ESLint : c’est la méthode la plus rapide
Sélection manuelle des fonctionnalités vous permet d’ajouter Router, Vuex, TypeScript, les tests et bien plus encore

Les préréglages peuvent être enregistrés et réutilisés pour les futurs projets.

Sélection manuelle des fonctionnalités

Lorsque vous choisissez la sélection manuelle, vous activez ou désactivez les fonctionnalités souhaitées.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Exécution du projet

Après la création, CLI affiche les commandes permettant de démarrer votre application.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Découvrez Vite

Vite est l’outil de compilation moderne créé par l’équipe de Vue.

Utilise les modules ES natifs pour un démarrage instantané
Remplacement de module à chaud extrêmement rapide
Beaucoup plus rapide que Vue CLI, basé sur webpack

Vite est désormais l’outil recommandé pour les nouveaux projets Vue.

Vite ou Vue CLI

Comparaison des deux outils :

Vue CLI utilise webpack, offre un démarrage à froid plus lent, mais il est mature et configurable
Vite utilise esbuild et ESM natif, avec un démarrage presque instantané ; c’est la valeur par défaut à l’avenir

Vue CLI est désormais en mode maintenance. Préférez Vite, sauf si vous maintenez un projet ancien.

npm create vue@latest

La méthode officielle pour démarrer un nouveau projet Vue utilisant Vite consiste à utiliser l’outil create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Exécution d’un projet create-vue

create-vue utilise les scripts Vite standards.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Lequel utiliser ?

Voici quelques conseils pour choisir :

Vous démarrez un projet depuis zéro en 2024 ou plus tard ? Utilisez npm create vue@latest (Vite)
Vous maintenez un ancien projet créé avec Vue CLI ? Continuez à l’utiliser
Vous voulez l’expérience de développement la plus rapide ? Vite est le meilleur choix

Vérification rapide

Vérifiez votre compréhension des choix d’outils Vue.

Récapitulatif : installation de Vue CLI

Vous avez découvert les outils de création de structures Vue :

Vue CLI s’installe avec npm install -g @vue/cli
vue create crée une structure à partir de préréglages
Vite est l’alternative moderne et rapide
npm create vue@latest est la méthode moderne recommandée pour démarrer

Ensuite : découverte de la structure du projet généré.

Questions Fréquemment Posées

La leçon « Installation de Vue CLI » est-elle gratuite ?

Oui — le texte complet de « Installation de Vue CLI » 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 « Installation de Vue CLI » ?

Installez et utilisez Vue CLI pour créer de nouveaux projets 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 1 sur 3.

Combien de temps prend la leçon « Installation de Vue CLI » ?

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