|
26 | 26 | title="Codelab Vue.js"
|
27 | 27 | environment="web"
|
28 | 28 | feedback-link="">
|
29 |
| - |
| 29 | + |
30 | 30 | <google-codelab-step label="PW1 - Getting Started" duration="0">
|
31 | 31 | <p>Dans cette première partie pratique, nous allons juste intégrer le template que nous vous mettons à disposition dans une application <strong>VueJS</strong>.<br>Pour cela nous allons nous servir de l'utilitaire <strong>vue-cli</strong>.</p>
|
32 | 32 | <ul>
|
|
39 | 39 | </ul>
|
40 | 40 | <p>Pour cette première étape, nous vous conseillons de désactiver <strong>eslint</strong> et le routeur lors de la génération de l'application. (ne pas faire en production ⚠️ 😉)</p>
|
41 | 41 | <ul>
|
42 |
| -<li>Vous devez à présent installer les dépendances avec <strong>NPM</strong> ou <strong>Yarn</strong><pre><code>npm i |
| 42 | +<li>Vous devez à présent installer les dépendances avec <strong>NPM</strong> ou <strong>Yarn</strong><pre><code>npm i |
43 | 43 | </code></pre>
|
44 | 44 | </li>
|
45 | 45 | <li>L'application se lance avec la commande suivante :<pre><code>npm run dev
|
|
52 | 52 |
|
53 | 53 |
|
54 | 54 | </google-codelab-step>
|
55 |
| - |
| 55 | + |
56 | 56 | <google-codelab-step label="PW2 - Les Composants" duration="0">
|
57 | 57 | <ul>
|
58 | 58 | <li>Vous êtes à présent prêt pour intégrer le template dans l'application qui vient d'être générée. Nous allons nous limiter pour l'instant à la page <code>home.html</code>. Voici les prérequis :<br><br><ul>
|
|
77 | 77 |
|
78 | 78 |
|
79 | 79 | </google-codelab-step>
|
80 |
| - |
| 80 | + |
81 | 81 | <google-codelab-step label="PW3 - Les Directives" duration="0">
|
82 | 82 | <p>Dans ce TP, nous allons dynamiser notre page avec les directives <code>v-for</code>, <code>v-if</code> et <code>v-bind</code>.</p>
|
83 | 83 | <ul>
|
|
99 | 99 |
|
100 | 100 |
|
101 | 101 | </google-codelab-step>
|
102 |
| - |
| 102 | + |
103 | 103 | <google-codelab-step label="PW4 - Les Filtres" duration="0">
|
104 |
| - <aside class="warning"><p>âš ï¸ plus de filtre dans vue.js 2 http://github.com/vuejs/vue/issues/2756#issuecomment-215503966<br>https://vuejs.org/v2/guide/syntax.html#Filters</p> |
| 104 | + <aside class="warning"><p>⚠️ Plus de filtre dans Vue.js<br>http://github.com/vuejs/vue/issues/2756#issuecomment-215503966<br>https://vuejs.org/v2/guide/syntax.html#Filters</p> |
105 | 105 | </aside>
|
106 | 106 | <p>Nous allons à présent créer des filtres, afin de formater le contenu de notre application.</p>
|
107 | 107 | <ul>
|
108 | 108 | <li>Créez le filtre <code>uppercase</code> pour écrire en majuscules le nom des bières</li>
|
109 |
| -<li>Créez le filtre <code>currency</code> pour ajouter le sigle <code>â</code>‚¬ au prix de chaque bière.</li> |
| 109 | +<li>Créez le filtre <code>currency</code> pour ajouter le sigle <code>�</code>�� au prix de chaque bière.</li> |
110 | 110 | <li>Nous allons terminer cette partie pratique par le développement d'une <code>Computed Property</code>. Itérer la directive <code>v-for</code> avec cette <code>Computed Property</code> afin de trier les éléments par la propriété <code>price</code>.</li>
|
111 | 111 | </ul>
|
112 | 112 |
|
113 | 113 |
|
114 | 114 | </google-codelab-step>
|
115 |
| - |
| 115 | + |
116 | 116 | <google-codelab-step label="PW5 - Les Ressources" duration="0">
|
117 | 117 | <p>Nous allons à présent intégrer à notre application une API REST.<br>Pour lancer le serveur, vous devez exécuter la commande suivante :</p>
|
118 | 118 | <pre><code>cd server
|
|
145 | 145 |
|
146 | 146 |
|
147 | 147 | </google-codelab-step>
|
148 |
| - |
| 148 | + |
149 | 149 | <google-codelab-step label="PW6 - Le Routeur" duration="0">
|
150 | 150 | <p>Nous allons à présent intégrer dans notre application le routeur proposé par la communauté <strong>VueJS</strong></p>
|
151 | 151 | <ul>
|
|
162 | 162 |
|
163 | 163 |
|
164 | 164 | </google-codelab-step>
|
165 |
| - |
| 165 | + |
166 | 166 | <google-codelab-step label="PW7 - Les Formulaires" duration="0">
|
167 | 167 | <p>Dans ce PW, nous allons éditer le formulaire dans le composant <code>basket</code> créé précédemment.</p>
|
168 | 168 | <ul>
|
|
176 | 176 |
|
177 | 177 |
|
178 | 178 | </google-codelab-step>
|
179 |
| - |
| 179 | + |
180 | 180 | <google-codelab-step label="PW8 - VueX" duration="0">
|
181 | 181 | <p>Pour terminer ce codelab, nous allons intégrer la bibliothèque <strong>Vuex</strong> afin de gérer les états de l'application.</p>
|
182 | 182 | <ul>
|
|
190 | 190 |
|
191 | 191 |
|
192 | 192 | </google-codelab-step>
|
193 |
| - |
194 |
| - <google-codelab-step label="Merci ðŸ™" duration="0"> |
195 |
| - <p>http://twitter.com/AurelienLoyer</p> |
| 193 | + |
| 194 | + <google-codelab-step label="Fin" duration="0"> |
| 195 | + <p>Merci 🙏</p> |
| 196 | +<h2>Garder le contact</h2> |
| 197 | +<ul> |
| 198 | +<li>Twitter 🐦<a href="http://twitter.com/AurelienLoyer" target="_blank">@AurelienLoyer</a></li> |
| 199 | +<li>Linkedin 🔗 <a href="https://www.linkedin.com/in/aurelien-loyer/" target="_blank">linkedin.com/in/aurelien-loyer</a></li> |
| 200 | +</ul> |
| 201 | +<h2>Aller plus loin</h2> |
| 202 | +<ul> |
| 203 | +<li>...</li> |
| 204 | +<li>...</li> |
| 205 | +</ul> |
196 | 206 |
|
197 | 207 |
|
198 | 208 | </google-codelab-step>
|
199 |
| - |
| 209 | + |
200 | 210 | </google-codelab>
|
201 | 211 |
|
202 | 212 | <script src="https://storage.googleapis.com/codelab-elements/native-shim.js"></script>
|
|
0 commit comments