Structurer avec Vue-CLI (2)

Créez un nouveau projet avec Vue-CLI et nettoyez-le (ne chargez plus HelloWorld, enlevez les styles…)

1. Créez un composant titre prenant un paramètre et affichant ce paramètre dans un élément h1
2. Ajoutez une propriété nom au modèle de données (contenant par exemple "Victor Hugo") ; créez un composant auteur prenant une chaîne de caractères en paramètre et affichant ce paramètre dans un paragraphe ; appelez ce paramètre après le titre pour obtenir par exemple…

   <div id="app" data-v-app="">
   	<h1>Liste de courses</h1>
   	<p>Liste de courses de Victor Hugo</p>
   </div>
   

3. Ajoutez une propriété liste au modèle de données (contenant par exemple ["pain", "beurre", "confiture"]) ; créez un composant liste1 prenant un tableau en paramètre et affichant ce paramètre dans une liste à puces ; appelez ce paramètre après le paragraphe donnant le nom de l'auteur pour obtenir par exemple…

   <div id="app" data-v-app="">
   	<h1>Liste de courses</h1>
   	<p>Liste de courses de Victor Hugo</p>
   	<ul>
   		<li>pain</li>
   		<li>beurre</li>
   		<li>confiture</li>
   	</ul>
   </div>
   

4. Ajoutez un champ de saisie et un bouton pour ajouter un élément à la liste
5. Ajoutez cette fois-ci une propriété listePrix valant [ {"nom": "pain", "quantite": 3, "prix": 1}, {"nom": "beurre", "quantite": 2, "prix": 1.8}, {"nom": "confiture", "quantite": 1, "prix": 2.5}] ; modifiez le champ de saisie de manière à pouvoir ajouter cette fois un élément à listePrix ; enfin, créez un composant affichant la liste de manière à obtenir

   <ul>
   	<li>3 pain à 1 €</li>
   	<li>2 beurre à 1.8 €</li>
   	<li>1 confiture à 2.5 €</li>
   </ul>
   

   Affichez le prix total (somme des prix des items de la liste multipliés par leur quantité) à l'aide d'une propriété calculée, dans le composant écrit pour afficher la liste avec prix