Préambule
- L'objectif de Vuejs est de prendre en charge l'affichage et le rafraîchissement automatique d'éléments d'une page HTML quand la valeur de variables JS change.
- Pour cela, vuejs met en place des mécanismes d'observation de ces variables et déclenche la mise à jour du DOM quand leur valeur change.
- Les valeurs de ces variables peuvent aussi bien venir d'un script JS qui est chargé localement dans le navigateur, que de requêtes à un serveur qui va répondre au navigateur avec par exemple des données au format JSON.
- Le principe de création d'une application Web avec vuejs repose donc clairement sur le principe de séparation strict entre la visualisation des données et le contrôle des actions utilisateur, qui est entièrement géré par le navigateur, et la fourniture des données qui est gérée par des serveurs.
- L'utilisation de vuejs nécessite de penser autrement le développement web, par rapport aux pratiques classiques liées au PHP/Python/... où le serveur interprète un langage pour produire du HTML.
- Avec vuejs, le serveur Web se contente d'envoyer au navigateur un unique fichier html, des scripts JS, du css. Cet ensemble de fichiers peut être entièrement écrit "à la main", ou bien partiellement généré grâce à un environnement de développement tel que vite.
- Contrairement à l'approche php, les scripts JS exécutés par le navigateur contiennent toute la logique de fonctionnement de l'application Web.
- Quand des données externes sont nécessaires, les scripts JS peuvent interroger un serveur de type API, pour aller les récupérer avec une requête asynchrone. Le navigateur n'a donc pas besoin de demander au serveur Web une autre page.
- Cette approche est la même que pour une application client/serveur basée sur des sockets.
- Son énorme avantage est de pouvoir développer la partie front-end (navigateur) et le back-end (serveurs) en parallèle.
- La seule chose qui doit être réglée avant est de spécifier le format des requêtes et des données échangées entre le navigateur et les serveurs.
- Pour créer et tester une application vuejs, il suffit d'avoir à sa disposition un éditeur de texte et un navigateur.
- En effet, il n'y a pas spécialement besoin d'héberger les fichiers créés sur un serveur Web, à part quand on passe en phase de déploiement/production.
- Pour autant, en milieu professionnel, la création d'applications web de type SPA (Single Page Application) avec Vuejs ne se fait pas en codant tout "à la main".
- En effet, vuejs repose sur la définition de composants. Un composant contient généralement une partie décrivant son aspect visuel (HTML) et une autre partie décrivant son aspect fonctionnel (en JS).
- Or, écrire des composants et les assembler sans passer par un environnement de dev. tel que vite est relativement verbeux et fastidieux.
- C'est pourquoi on utilise tout le temps ce type d'environnement, à part pour de très petits exemples pédagogiques (cf. article hello world)
- Premièrement, vite comporte des outils permettant de créer une application web à partir de fichiers dont la syntaxe n'est pas du pur javascript. Ce sont des fichiers dit SFC : Single File Components qui permettent de décrire des composants, à savoir leur visuel écrit en HTML + instructions vuejs, leurs données et fonctions écrit en JS, et leur sytle écrit en CSS.
- Il y a donc des logiciels associés à vite permettant de faire la "compilation" et l'assemblage de ces fichiers pour produire une application.
- L'organisation du code de l'application est modulaire, à savoir qu'un fichier constitue un module qui va "exporter" des variables/fonctions que d'autres fichiers (donc modules) vont pouvoir importer pour les manipuler. En terme de résultat, c'est un peu similaire au include du php.
- Deuxièmement, vite est un gestionnaire de projet :
- on peut créer facilement un arborescence basique d'application,
- on peut ajouter des modules/plugins au projet,
- on peut tester rapidement l'application,
- on peut créer (et tester) une version de production, prête à être déployée sur un serveur Web.
- etc.
Remarques :
- Vite est le successeur de vue-cli, l'outil qui permettait de créer des projet en vuejs v2.
- Vite permet de créer des projets basés sur d'autres environnement JS, tels que Ract, Angular, ...
- Vite est bien plus rapide que vue-cli pour lancer un projet car il utilise de la compilation "à la volée" au lieu de construire tote l'application.
1°/ Un projet vuejs basique avec vite
1.1°/ Créer le projet
- Créer un projet vue est très facile : npm create vue@latest
- Il est également possible d'utiliser directement vite, mais cela nécessite de spécifier l'environnement vue et ne permet pas de sélectionner les plugins dédiés à vuejs. C'est donc moins rapide/souple, donc déconseillé.
- On obtient l'affichage suivant :
|
> npx ┌ Vue.js - The Progressive JavaScript Framework |
- Il suffit de taper le nom de son projet, qui sera également le nom du répertoire racine du projet.
- Ensuite, on sélectionne éventuellement des plugins et des options (cf. 1ère ligne pour l'utilisation) :
|
◆ Sélectionnez les fonctionnalités à inclure dans votre projet : (↑/↓ pour naviguer, espace pour sélectionner, a pour tout sélectionner, entrée pour confirmer) |
- On peut également sélectionner des fonctionnalités expérimentales (NB : inutile pur ce cours)
|
◆ Sélectionnez les fonctionnalités expérimentales à inclure : (↑/↓ pour naviguer, espace pour sélectionner, a pour tout sélectionner, entrée pour confirmer) |
- Enfin, on sélectionne un projet vierge (NB: cela permet d'éviter des style css pénibles déjà créés)
|
◆ Ignorer tout le code d'exemple et commencer avec un projet Vue vierge ? |
- On obtient normalement un projet prêt à être modifié :
|
Génération du projet dans /home/sdomas/code/vuejs/blankvue3... cd blankvue3 | Optionnel : Initialisez Git dans votre répertoire de projet avec : |
- Comme indiqué, il suffit d'aller dans le répertoire racine du projet et de lancer l'installation des module node
- npm run dev permet de lancer un mini serveur http qui va "servir" l'unique page du projet, via une URL locale.
2°/ Analyse des fichiers créés par défaut
- On suppose que l'on a créé un projet blankvue3, sans options/pugins, puis lancé l'installation des modules node.
- On a un répertoire blankvue3 avec notamment dedans :
- package.json : fichier décrivant les différent modules nodejs utilisés, leur dépendances et certaines options de configuration.
- vite.config.js : fichier décrivant la configuration de vite utilisée pour gérer le projet. Il est parfois nécessaire d'aller modifier ce fichier lorsque la configuration par défaut est déficiente.
- node_modules : où est stocké le code des modules.
- index.html : contient le patron de fichier html utilisé pour l'application SPA
- src : les sources de l'application.
- Sauf exception, on a besoin d'intervenir uniquement sur les fichiers de src.
- src contient :
- App.vue : décrit la page principale de l'application. Le fichier est structuré comme tous les fichiers .vue, avec une partie <template> décrivant le html, une partie <script> contenant du javascript, et enfin une partie <style> avec le CSS pour formater l'affichage. NB : ces deux dernières parties sont vides dans un projet vierge.
- main.js : crée l'instance de vue. On modifie ce fichier quand on veut ajouter à la vue des modules/plugins après la création (par ex, vue-router, vuetity, ...).
- Il est tout à fait possible de créer d'autres répertoires. C'est le cas notamment du répertoire components que l'on crée pour mettre les autres fichiers .vue qui composent l'application. Quand on utilise des plugins, d'autres répertoires sont également créés (par ex, router avec vue-router)
2.1°/ Les fichiers .vue
- Un fichier .vue sert à définir un composant.
- Il peut contenir 3 parties :
- <template> : contient le code HTML décrivant le visuel du composant.
- <script> : contient du javascript décrivant les données manipulées par le composant, ainsi que les fonctions de contrôle.
- <style> : contient du CSS, pour formater l'affichage donné dans le template.
- Seul <template> est obligatoire. Si un composant n'a pas de données propres, ou des fonctions de contrôle, alors pas besoin de partie script.
- La partie template est implicitement "exportée", ce qui permet de l'importer dans d'autres composants.
- Si le composant contient une partie script, il est possible d'utiliser <script setup> pour simplifier l'écriture du contenu de <script>
2.2°/ index.html
- Le seul point à remarquer est que le fichier contient une balise <div id="app"> qui va constituer le point de montage de l'instance de Vue.
- Mais contrairement à ce que l'on a fait dans l'exemple hello world, il n'y a pas de code dans <div>.
- C'est normal : le contenu de cette balise va être créer dynamiquement lorsque l'instance de Vue est créée (cf. ci-après).
2.3°/ main.js
- La façon d'instancier la vue est relativement différente de l'exemple hello world décrit dans l'article Un hello world en pur vuejs (i.e. sans vue-cli)
- Sans trop entrer dans les détails, on remarque que l'on importe une fonction createApp, ainsi que le fichier App.vue, qui est le composant représentant la page principale de l'application.
- On remarque également que App est utilisé comme paramètre de la fonction. Cette fonction traduit le template de App en éléments HTML.
- Ces éléments sont "montés" (= affectés) en tant qu'éléments fils de la <div id=app> se trouvant dans index.html
2.4°/ App.vue
- D'un point de vue syntaxique, ce fichier décrit un composant. Comme c'est le composant racine de l'application, on ne le met pas dans le répertoire components.
- On remarque que le template contient du HTML classique. Cependant, pour bénéficier de toute la puissance de vuejs, il est nécessaire d'écrire ce template en utilisant des directive non-HTML, définies par vuejs, telles que v-if, v-for, v-bind, ...
- La partie script (vide dans cet exemple), contient uniquement du javascript.
- Le code utilise les instructions, fonctions, ... classique de l'ECMAScript 5, mais il est également nécessaire d'importer des fonctions depuis vue pour bénéficier des principes d'observation et de réactivité des variables que l'on va manipuler.
- La partie template (vide dans cet exemple) contient du CSS classique
3°/ Tester/déployer
- Comme dit plus haut, le code produit n'est pas utilisable directement dans un navigateur. Il faut donc utiliser les outils de vite pour créer une version utilisable.
- Il existe deux solutions :
- créer une version de développement, non optimisée,
- créer une version de production, compacte, prête à être mise en ligne sur un serveur web.
3.1°/ Tester
- Le principe est de compiler les sources puis de lancer un mini-serveur web local, à même de servir le résultat.
- Pour cela, il suffit d'être dans l'arborescence du projet et lancer :
npm run dev- Après compilation, un message indique l'URL permettant d'accéder au serveur, généralement quelque chose du genre http://localhost:5173
- A noter que si on laisse le serveur tourner et que l'on modifie les fichiers, le serveur en tien compte.
3.2°/ Déployer
- La compilation optimisée se fait avec la commande
npm run build- Un répertoire dist est créé, avec tous les fichiers nécessaires dedans.
- Pour tester le résultat rapidement localement, il faut se placer à la racine du projet et lancer la commande
serve -l 12345 dist- Cela suppose que la paquet nodejs serve a bien été installé (cf. procédure dans l'article Installation de node, serve & config. idea
- Le paramètre -l permet de spécifier le port sur lequel le serveur web écoute.
- Si tout fonctionne correctement, on peut mettre en place un vrai serveur web et copier les fichier dans un répertoire servi (NB : sujet non abordé ici)