Installer Vue.js sur le sous-système Windows pour Linux

Guide de configuration d’un environnement de développement Vue.js sur le sous-système Windows pour Linux (WSL). Pour plus d’informations, consultez la vue d’ensembleVue.js.

Vue peut être installé directement sur Windows ou sur WSL. WSL est recommandé si vous envisagez d’interagir avec un serveur principal Node.js, de déployer sur des serveurs Linux ou de suivre des didacticiels qui utilisent des commandes Bash.

Conditions préalables

• Installez le sous-système Windows pour Linux (WSL), y compris une distribution Linux (comme Ubuntu) s’exécutant en mode WSL 2. Vérifier avec : wsl -l -v
• Installer Node.js sur WSL 2 : cela comprend un gestionnaire de version, un gestionnaire de package, Visual Studio Code et l’extension Remote Development.

Important

Stockez vos fichiers projet dans le système de fichiers WSL (par exemple, ~/projects), et non sur le lecteur Windows monté (/mnt/c/). Traverser la limite du système de fichiers ralentit considérablement les temps d’installation et de compilation.

Créer un projet Vue

La méthode recommandée pour démarrer un nouveau projet Vue 3 est npm create vue@latest, et elle utilise create-vue, l’outil officiel basé sur Vite pour la génération de modèles.

1. Ouvrez votre terminal WSL (par exemple, Ubuntu).

2. Accédez au répertoire de vos projets :

   mkdir -p ~/projects
   cd ~/projects
   

3. Créez un projet Vue :

   npm create vue@latest
   

   Le programme d’installation vous invite à nommer votre projet et à choisir des fonctionnalités facultatives (TypeScript, prise en charge JSX, Routeur Vue, gestion d’état Pinia, Vitest, ESLint).

4. Accédez au dossier du projet, installez les dépendances et démarrez le serveur de développement :

   cd <your-project-name>
   npm install
   npm run dev
   

   Votre application sera disponible à l’adresse http://localhost:5173.

Ressources supplémentaires

• Documentation de Vue
• Vue d’ensemble deVue.js
• Installer Vue.js sur Windows
• Effectuez vos premières étapes avec Vue.js parcours d’apprentissage
• Didacticiel Vue utilisant VS Code