Ranger un projet — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 6)

Ranger un projet

Vite et composants monofichiers · niveau 1 (application)

Énoncé

Dans le projet de la Librairie, où ranger : la fonction qui calcule les frais de livraison ; le logo de la Librairie, affiché dans l'en-tête ; un composant FichePrix ; la feuille de style d'impression de tout le site ; l'adresse du serveur, qui change entre le poste du développeur et le site en ligne ; le mot de passe de la base de données ?

Corrigé

Les frais de livraison : une fonction sans état, dans un module de src/utils/ (par exemple livraison.js), importable par tout composant et testable seule (chapitre 11).
Le logo : importé par l'en-tête, il va dans src/assets/ ; il recevra une empreinte, utile si on le change.
FichePrix.vue : dans src/components/.
La feuille d'impression du site : globale, dans src/assets/ (ou dans la feuille principale, dans un bloc @media print), importée par main.js.
L'adresse du serveur : une variable VITE_URL_API dans .env (et .env.production pour le site en ligne).
Le mot de passe de la base de données : nulle part dans ce projet. Tout ce que contient l'application part chez le visiteur ; le mot de passe reste sur le serveur.