Comment installer Vue.JS sur Ubuntu 22.04

Vue.js est un framework javascript utilisé pour créer une interface utilisateur interactive et des applications à une seule page. Il est plus léger et plus adaptable que le framework AngularJS. Il est simple, flexible, modulaire, très performant, facile à apprendre et fournit de nombreux outils et bibliothèques qui facilitent le développement d’applications. Si vous connaissez les bases de HTML, CSS et JavaScript, vous pouvez rapidement commencer à créer des applications web avec Vue.js.

Ce guide vous montrera comment installer Vue JS sur Ubuntu 22.04.

Prérequis

• Un serveur exécutant Ubuntu 22.04 pour HAProxy.
• Un mot de passe root configuré sur tous les serveurs.

Installer Node.js

Avant de commencer, vous devrez installer Node.js sur votre serveur. Par défaut, la dernière version de Node.js n’est pas incluse dans le dépôt par défaut d’Ubuntu 22.04. Vous devrez donc l’installer à partir du dépôt source de Node.

Tout d’abord, installez les dépendances requises en utilisant la commande suivante :

apt install curl gnupg2 gnupg git wget -y

Ensuite, ajoutez le dépôt source de Node en utilisant la commande suivante :

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Une fois le dépôt ajouté, vous pouvez installer Node.js avec la commande suivante :

apt install nodejs -y

Une fois Node.js installé, vous pouvez vérifier la version de Node.js en utilisant la commande suivante :

node --version

Vous obtiendrez la sortie suivante :

v16.16.0

Maintenant, mettez à jour NPM vers la dernière version en utilisant la commande suivante :

npm install npm@latest -g

Vous pouvez également vérifier la version de NPM avec la commande suivante :

npm --version

Vous devriez obtenir la sortie suivante :

8.13.2

Installer Vue CLI

Vous pouvez maintenant utiliser NPM pour installer le package Vue CLI en utilisant la commande suivante :

npm install -g @vue/cli

Une fois Vue installé, vous pouvez vérifier la version de Vue JS en utilisant la commande suivante :

vue --version

Vous devriez voir la sortie suivante :

@vue/cli 5.0.8

Créer une application simple avec Vue JS

Vous pouvez maintenant utiliser Vue CLI pour créer facilement votre application. Exécutez la commande suivante pour créer une application d’exemple nommée myapp.

vue create myapp

Vous obtiendrez la sortie suivante :

Vue CLI v5.0.8
?  Création du projet dans /root/myapp.
????  Initialisation du dépôt git...
??  Installation des plugins CLI. Cela peut prendre un certain temps...


ajouté 848 paquets, et audité 849 paquets en 24s

88 paquets recherchent un financement
  exécutez `npm fund` pour plus de détails

aucune vulnérabilité trouvée
????  Invocation des générateurs...
????  Installation des dépendances supplémentaires...


ajouté 95 paquets, et audité 944 paquets en 6s

98 paquets recherchent un financement
  exécutez `npm fund` pour plus de détails

aucune vulnérabilité trouvée
?  Exécution des hooks de complétion...

????  Génération de README.md...

????  Projet myapp créé avec succès.
????  Commencez avec les commandes suivantes :

 $ cd myapp
 $ npm run serve

 WARN  Commit git ignoré en raison d'un nom d'utilisateur et d'un e-mail manquants dans la configuration git, ou échec de la signature du commit.
       Vous devrez effectuer le commit initial vous-même.

Ensuite, changez le répertoire vers myapp et listez tous les fichiers et répertoires installés en utilisant la commande suivante :

cd myapp  
ls

Vous obtiendrez la sortie suivante :

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Démarrer l’application Vue JS

Vous pouvez maintenant démarrer votre application Vue JS en exécutant la commande suivante :

npm run serve

Une fois l’application démarrée, vous obtiendrez la sortie suivante :

> [email protected] serve
> vue-cli-service serve

 INFO  Démarrage du serveur de développement...

 DONE  Compilé avec succès en 6469ms                                                                                              8:45:33 AM


  Application en cours d'exécution à :
  - Local :   http://localhost:8080/ 
  - Réseau : indisponible

  Notez que la version de développement n'est pas optimisée.
  Pour créer une version de production, exécutez npm run build.

Accéder à l’interface web de Vue JS

À ce stade, l’application Vue JS est installée et écoute sur le port 8080. Vous pouvez maintenant ouvrir votre navigateur web et accéder à l’application Vue JS en utilisant l’URL http://your-serevr-ip. Vous devriez voir le tableau de bord Vue JS sur la page suivante :

Conclusion

Dans cet article, nous avons expliqué comment installer Vue JS sur Ubuntu 22.04. Vous pouvez maintenant commencer à créer votre application à une seule page en utilisant le framework Vue JS. N’hésitez pas à me poser des questions si vous en avez.