1°/ Installation de node - vue/cli
|
ATTENTION ! Cette procédure d'installation n'est destinée qu'aux élèves qui veulent utiliser leur propre machine pour les TPs. Sinon, les machines du département Info sont déjà installées avec node v14.20, npm v6.14 et serve V11.3 |
- 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.
|
ATTENTION ! Les versions 17.X et 18.x de node peuvent poser problème lors de la compilation de projet vuejs. Il ne faut surtout pas les installer. |
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
|
ATTENTION ! Si vous utilisez powershell afin de lancer les commandes ci-dessous, puis utiliser vue-cli pour créer des projet, il est possible de windows bloque l'exécution des scripts dans votre fenêtre powershell. Dans ce cas, il met une erreur du type "Execution des scripts désactivées". Pour régler ce problème :
|
- 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
| ATTENTION ! Pour pouvoir installer le plugin vuejs sous Idea, il faut obligatoirement utiliser la version ultimate et donc avoir une licence IntelliJ. Cette licence est gratuite pour les étudiants. |
- 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