R3.01 - dev. web - côté client (vuejs)

1°/ Installation de node - vue/cli

• vue-cli se base sur nodejs, notamment pour les outils permettant de transcrire une application en pur js.
• il faut donc au préalable installer nodejs dans une version suffisamment récente, mais pas trop non plus, par exemple la v16.

1.1°/ Linux debian/ubuntu

• Il existe des version disponibles dans les distributions de base, mais le plus souple est d'installer nvm dans son home directory afin de choisir ensuite quelle version de node installer.
• Procédure d'installation :
  • dans un terminal lancer la commande suivante :

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

• • Ensuite, se positionner à la racine de votre home, relire le fichier .bashrc (qui a été modifié par la commande précédente) puis installer une version de node, par exemple la 16.17.1

cd ~
source .bashrc
nvm install 16.17.1

•   
  • normalement, l'environnement node est maintenant opérationnel. Par exemple, si la v16 a été installé, on teste avec :

ordi:~ $ node -v
v16.17.1
ordi:~ $ npm -v
8.15.0

• • Il reste à installer vue-cli et serve :

npm install -g serve
npm install -g @vue/cli

• • Pour tester l'installation :

ordi:~ $ vue -V
@vue/cli 5.0.8
ordi:~ $ serve -v
14.0.1

1.2°/ Windows

• Le plus simple est de passer par nvm (node version manager).
• Pour le télécharger, aller à https://github.com/coreybutler/nvm-windows/releases/
• Cliquer sur nvm-setup.zip
• Une fois le téléchargement fini, il suffit de dezipper l'archive, puis de lancer nvm-setup.exe.
• Après l'installation, la commande nvm est disponible dans le terminal powershell.
• Pour voir la liste des environnements nodejs installables : nvm list available
• Choisissez le n° de version la plus récente (par exemple, 18.10.0), puis lancez l'installation avec : nvm install num_version (par ex, nvm install 18.10.0)
• Une fois l'installation finie, précisez au système que vous désirez utiliser cette version : nvm use num_version.
• Normalement, vous avez maintenant accès à node et npm dans le terminal.
• Installez serve et vue-cli :

npm install -g serve
npm install -g @vue/cli

2°/ Mise en place de l'environnement d'édition Idea

• Pour créer ou importer un projet vue sous idea, il faut installer le plugin vue.js
• Pour cela :
  • en bas à droite de la fenêtre de démarrage, cliquer sur "Configure" puis "plugins". La fenêtre de gestion des plugins s'ouvre.
  • cliquer sur l'onglet "Marketplace" et dans le champ de recherche, taper : vuejs
  • cliquer sur installer
  • après le redémarrage de idea, il faut activer certains plugins, qui peuvent être par défaut inactifs
  • re-ouvrir la fenêtre de gestion des plugins et cliquer sur l'onglet "Installed"
  • descendre jusqu'à trouver la section "Javascript Frameworks and Tools".
  • dans cette section "Javascript and Typescript" doit être activé mais il dépend peut être de plugins non activés. Cliquer sur le lien "Enable required plugin" pour les activer automatiquement.
  • refaire cette procédure pour tous les plugins de la section.

3°/ Passer un projet vuejs sous Idea 

• Une fois le projet vuejs créé grâce à vue-cli (cf. TP 1), lancer Idea
•  Selon les versions, il est possible ou non d'avoir un bouton/item de menu du type "create from existing source".
• Si c'est le cas, il suffit ensuite de sélectionner le répertoire où se trouve le projet puis de cliquer sur Ok dans les fenêtres qui apparaissent.
• Si ce n'est pas le cas, il faut :
  • cliquer sur "nouveau projet"
  • choisir comme type d'application "Web" (ATTENTION, ne surtout pas choisir javascript+vuejs car cela recrée le projet).
  • choisir le répertoire où se trouve le projet vuejs
  • cliquer sur "Finish".
• Il faut ensuite ajouter une configuration de compilation/exécution du projet.
• Pour cela, cliquer sur le champ "Add configuration" en dessous de la barre de menu.
• Dans la fenêtre qui apparaît, cliquer sur le bouton + en haut à gauche et choisir npm.
• Dans le champ déroulant "Script", choisir serve.puis cliquer sur "Ok".
• Il est ensuite de lancer la compilation du projet en cliquant sur la flèche verte.
• Si la compilation réussit, npm lance un serveur web de test de l'application, auquel on accède généralement avec l'URL : http://localhost:8080