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 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 vue-cli.
• 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 vue-cli 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, vue-cli 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 à vue-cli 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, vue-cli 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.
• Enfin, vue-cli permet de profiter de composants écrits par d'autres développeurs. En effet, ces composants suivent la syntaxe particulière mentionnée ci-dessus et qui sera décrite plus loin.

1°/ Un projet basique avec vue-cli

1.1°/ Créer le projet

• Créer un projet vue est très facile : vue create nom_projet

• on obtient un menu comme suivant :

  ? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  ❯ Manually select features
  

• Selon les versions de vue-cli, il propose par défaut de créer un projet vuejs v2, ou bien v3. Comme indiqué ci-dessus, on peut également paramétrer le projet en spécifiant des options ou des plugins.

• Dans l'exemple ci-dessous, les plugins vue-router et vuex ont été activés et seront intégrés directement au canevas de code générer par vue-cli.

  ? Please pick a preset: Manually select features
  ? Check the features needed for your project:
  ◉ Choose Vue version
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◉ Router
  ❯◉ Vuex
  ◯ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing
  

2°/ Analyse des fichiers créés par défaut

• On suppose que l'on a créé un projet exo, avec vuejs v2, sans options/pugins : vue create exo
• Cela crée un répertoire exo avec notamment dedans :
  • package.json : fichier décrivant les différent modules nodejs utilisés, leur dépendances et certaines options de configuration.
  • node_modules : où est stocké le code des modules.
  • public : contient le patron de fichier html utilisé pour l'application SPA
  • src : les sources de l'application.

<aside> 💡

Sauf exception, on a besoin d'intervenir uniquement sur les fichiers de src.

</aside>

• 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 notamment tout ce qui est associé à vuejs (data, methods, ...), et enfin une partie <style> avec le CSS pour formater l'affichage.
  • 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, ...).
  • components : le répertoire contenant les composants de l'application, généralement sous forme de fichier .vue. Par défaut, vue-cli crée un composant HelloWorld.vue qui permet seulement de personnaliser le titre principal du composant.

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 (via les champs props et data), 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.