Vue et Vuex : des ressources pour bien commencer

Besoin d'aide pour bien commencer avec vue et Vuex . Le BlogDuWebdesign vous prémache le travail en vous proposant des ressources à lire et des démonstrations à décortiquer pour bien comprendre comment fonctionne ce framework front-end !

Le choc des cultures

Une des premières choses qui peut choquer quand on se met à la recherche de ressources pour Vuex, ce sont les idéogrammes.

Je ne sais pas si c'est par patriotisme (le développeur principal de Vue js, Evan You, est chinois) ou parce que les Américains préfère utiliser React, mais la (très) grande majorité des exemples que vous pourrez trouver pour vue et Vuex sont fait par des Chinois (et ensuite, plus de japonais et de coréen que de reste). Chinois qui ne commentent donc pas en anglais, mais en chinois, ce qui peut poser quelques petits problèmes de compréhension pour les gens ne parlant pas cette langue (moi, par exemple), voir d'affichage pour les gens n'ayant pas de police supportant les ideogrammes.

Néanmoins, un des gros avantages de vue et Vuex étant qu'ils sont particulièrement bien organisés, la lecture du code d'une démo apporte la plupart du temps toutes les clés pour comprendre comment des dernières fonctionnent. C'est comme cela que j'ai compris la grande majorité de ce que je sais de vue, et c'est donc pour cela que je vous propose une liste de démo pour bien mettre le pied à l'étrier !

Garder la documentation sous la main

Avant d'aller sur des démo, je vous conseille de garder ouverts trois onglets. Tout d'abord la documentation de vue et Vuex évidemment, mais aussi une Cheetsheet assez bien faite et agréable à manipuler.

Documentation de Vue

Documentation de Vuex

Vue+Vuex Cheetsheet

Quelques exemples et démo

Vue-chat

Un petit chat tout simple et très facile à comprendre, qui vous permettra de comprendre les bases du fonctionnement de la création d'interface et du fonctionnement des actions asynchrones. 

Notez que dans le même registre il existe aussi un clone de weChat, surement très bien, que j'ai réussi à faire tourner mais absolument pas à comprendre.

Vue memo

Une démo (en anglais !) d'un moteur de memo, très utile pour comprendre comment lier Vuex avec Firebase, des apis de SSO, et autres.

Electron-vue

Cette template permettant de bootstraper un projet directement avec Électron et Vue est vraiment très intéressant pour sa configuration de Webpack. Vous y trouverez une aide précieuse pour bien configurer les outils de debug de Vue et Vuex, webpack pour compiler les fichiers .vue, etc

Vue-tetris

Le nom parle de lui meme ! Notez que le jeu est aussi vraiment parfait sur mobile.

Vue-admin

Pas forcément la plus intéressante de toutes les démos en matière d'apprentissage, mais il y a beaucoup de choses intéressantes à en tirer, donc le binding des formulaires avec v-module.