Partage via

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

  • Article

Guide conçu pour vous aider à configurer un environnement de développement Vue.js sur Windows en installant le framework web Vue.js sur le Sous-système Windows pour Linux (WSL). Pour plus d’informations, consultez la page Vue d’ensemble de Vue.js.

Vue peut être installé directement sur Windows ou sur WSL. Nous recommandons généralement l’installation sur WSL si vous envisagez d’interagir avec un back-end NodeJS, que vous voulez une parité avec un serveur de production Linux ou que vous envisagez de suivre un tutoriel qui utilise des commandes Bash. Vous pouvez également envisager Vite comme alternative à Vue.js.

Prérequis

  • Installer le Sous-système Windows pour Linux (WSL), y compris une distribution Linux (comme Ubuntu) et s’assurer qu’elle s’exécute en mode WSL 2. Pour le vérifier, ouvrez PowerShell et entrez : 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. Node Package Manager (npm) est utilisé pour installer Vue.js.

Important

L’installation d’une distribution Linux avec WSL crée un répertoire pour le stockage des fichiers : \\wsl\Ubuntu-20.04 (remplacez Ubuntu-20.04 par la distribution Linux que vous utilisez). Pour ouvrir ce répertoire dans l’Explorateur de fichiers Windows, ouvrez votre ligne de commande WSL, sélectionnez votre répertoire de base en utilisant cd ~, puis entrez la commande explorer.exe . Veillez à ne pas installer ou stocker de fichiers sur lesquels vous travaillerez sur le lecteur C monté (/mnt/c/Users/yourname$). Cela ralentit considérablement les temps d’installation et de génération.

Installer Vue.js

Pour installer Vue.js sur WSL :

  1. Ouvrez une ligne de commande WSL (par exemple, Ubuntu).

  2. Créez un dossier pour le nouveau projet : mkdir VueProjects, puis accédez à ce répertoire : cd VueProjects.

  3. Installez Vue.js en utilisant Node Package Manager (npm) :

npm install vue

Vérifiez le numéro de version que vous avez installé en utilisant la commande vue --version.

Note

Pour installer Vue.js en utilisant un CDN plutôt que NPM, consultez la documentation d’installation de Vue.js.

Installer Vue CLI

Vue CLI est un kit de ressources permettant d’utiliser Vue dans votre terminal/ligne de commande. Vous pouvez ainsi générer rapidement un nouveau projet (vue create), prototyper de nouvelles idées (vue serve) ou gérer des projets en utilisant une interface utilisateur graphique (vue ui). Vue CLI est un package npm installé globalement qui gère à votre place certaines des complexités de build (comme l’utilisation de Babel ou Webpack). Si vous ne créez pas une application monopage, vous n’avez peut-être pas besoin de Vue CLI.

Pour installer Vue CLI, utilisez npm. Vous devez utiliser l’indicateur -g pour effectuer une installation globale afin de procéder à une mise à niveau (vue upgrade --next) :

npm install -g @vue/cli

Pour en découvrir plus sur les plug-ins supplémentaires qui peuvent être ajoutés (tels que le linting ou Apollo pour l’intégration de GraphQL), consultez Plug-ins Vue CLI dans la documentation de Vue CLI.

Ressources supplémentaires