Introduction à Vue.js

# Écosystème de Vue

Grâce à sa popularité, Vue s'est enrichi d'un vaste écosystème de plugins et d'outillage. Une (longue) liste est disponible ici : awesome-vue (opens new window).

En voici une sélection de quelques-uns :

  • vue-devtools (opens new window) Une extension navigateur très utile pour déboguer des applications Vue. Disponible sur Chrome, Firefox ou en application standalone.

  • Vue Styleguide (opens new window) Un guide de style maintenu par l'équipe officielle pour lister les conventions et bonnes pratiques autour de projets Vue.

  • vue-axe (opens new window) Un outil d'audit pour l'accessibilité de vos applications Vue. Il indique en console développeur la liste des défauts d'accessibilité repérés dans le code.

  • vuepress (opens new window) Un générateur de site de documentation utilisant Vue (utilisé pour ce support de formation).

# Frameworks UI

Il existe de nombreux frameworks UI avec un grand nombre de composants prédéfinis et déjà stylisés, censés répondre à tous vos besoins en termes d'interface.

WARNING

Note : ne remplace pas le travail d'un designer, ergonome ou développeur CSS.

# Server-side rendering

Le rendu côté serveur (SSR) consiste à remplacer les serveurs frontaux classiques (Apache/nginx) par des interpréteurs JS (le plus souvent Node.js) qui vont exécuter Vue et générer les pages côté serveur. Cela permet de supporter les clients ayant JavaScript désactivé, améliore l'indexation sur les moteurs de recherche et améliore les performances au rendu initial.

Nuxt (opens new window) est le framework SSR de référence pour Vue.js. Il propose un routage basé sur l'arborescence des sources, et assure une bascule transparente entre le rendu serveur et la prise en main côté client.

# Fin de TP - exercices libres

  • Testez les outils qui vous intéressent
  • A l'aide du framework UI de votre choix, enjolivez votre application web 😃

←