Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Présentation

Mis à jour le

Nécessite d'avoir vue le cours vueJS approfondissement

Vue CLI

Mis à jour le

Vue-cli est un outils en ligne de commande qui vous permet différentes choses telles que :

  • créer un projet facilement selon préférences pré-enregistrées (presets) (dossier pour les vues, les composants, les assets, plugins, dépendances, etc...)
  • servir vos sources en mode dev pour travailler en local lors du développement de votre projet (serveur…
~~ Fin de l'extrait ~~

Vue UI

Mis à jour le

Maintenant que vous avez découvert l'outils en ligne de commande permettant de gérer le développement de vos projets, voici un outils bien pratique qui fait à peu près les même choses, mais via une interface graphique web. Vous allez pouvoir :

  • créer des projets
  • enregistrer des presets
  • lancer les taches serve build etc....
  • bénéficier…
~~ Fin de l'extrait ~~

Composant mono-fichier

Mis à jour le

Mixins

Mis à jour le

Les mixins sont des sortes de composants "utilitaires" dans votre application. Elles permettent de stocker des fonctionnalités qui peuvent être utiles à plusieurs composants a priori totalement indépendant les des autres, et surtout d'éviter d'écrire du code redondant. 

Par exemple, vous pouvez regrouper toutes vos méthodes de formatage de texte (diverses…

~~ Fin de l'extrait ~~

Plugins

Mis à jour le

Installation des plugins

Pour installer un plugin dans Vue, vous avez deux choix :

  • soit via un CDN, si il existe
  • soit en l'installant en local


L’installation en local se fait via npm, par exemple :

npm install nom-du-plugin

Puis, vous devrai l'importer dans votre application de cette manière (au bon emplacement, se référer…

~~ Fin de l'extrait ~~

Vue Router

Mis à jour le
Installation

Le router officiel de Vue (vue-router) n'est pas inclut dans le noyau de Vue. Il vous faudra donc l'installer, au besoin. 

Vous pouvez récupérer le code via un CDN :

https://unpkg.com/vue-router@3.1.6/dist/vue-router.js

Puis l'inclure dans votre HTML :

<script src="/path/to/vue-router.js"></script>

Ou bien l'installer via NPM :

npm install vue-router
Puis l'importer dans votre application… ~~ Fin de l'extrait ~~

VueX

Mis à jour le

Présentation de Flux et VueX

VueX est un plugin officiel de VueJS permettant l'implémentation du design pattern Flux, permettant de résoudre un problème récurrent des framework front-end JS : l'échange de données entre composants non-parent. Pour prendre un exemple, imaginez la messagerie instantanée de Facebook. Lorsque vous avez des nouveaux messages,…

~~ Fin de l'extrait ~~

Autres fonctionnalités

Mis à jour le

Il y a encore pleins de possibilités offertes par Vue que vous pourrez utiliser plus ou moins tôt dans votre apprentissage, en voici quelques unes :

~~ Fin de l'extrait ~~

Ressources

Mis à jour le

Documentation officielle (en grande partie en FR) : https://fr.vuejs.org/index.html


Liens utiles : 

~~ Fin de l'extrait ~~

TP FakeFlix

Mis à jour le

Ce TP va vous permettre de mettre en pratique toutes les notions de Vue abordées jusqu'ici. Il va vous permettre de travailler avec une vraie API REST, ce qui comporte :

  • l'authentification d'un user
  • la compréhension des différentes routes
  • la compréhension de la doc technique
  • etc...


Vous allez travailler avec l'API proposé par le site 

~~ Fin de l'extrait ~~