Fermer

juillet 23, 2019

10+ outils et bibliothèques Top Vue.js –


La popularité de Vue continue de grandir et est rapidement adoptée par de nombreux développeurs. Les outils de Vue.js font leur apparition un peu partout. Ce n'est pas sans raison: la courbe d'apprentissage superficielle de Vue, sa structure claire, axée sur les fonctionnalités, et son excellente documentation facilitent la tâche des novices, et incitent les développeurs plus expérimentés à passer à d'autres frameworks tels que React ou Angular.

Si vous êtes sérieux au sujet du développement de Vue vous rencontrerez tôt ou tard des outils fondamentaux et des bibliothèques qui se démarquent de la foule. Leur utilisation vous permettra de progresser dans votre carrière de développeur Vue et de vous faire sentir comme un professionnel.

J'ai dressé une liste des outils et bibliothèques les plus remarquables que vous devriez connaître et utiliser dans vos projets Vue.js. Contrairement à de nombreux autres articles qui ne répertorient que des bibliothèques de composants d'interface utilisateur, cette compilation explore un mélange beaucoup plus large d'outils, de bibliothèques et de plug-ins dans l'écosystème Vue.

J'ai choisi ceux-ci en fonction de leur utilité, de leur efficacité et de leur unicité – et non de leur popularité ou de leur classement par étoiles selon GitHub. ]

De nos jours, il semble que tous les frameworks d’application JavaScript ont besoin d’une sorte d’outil CLI. Vue ne fait pas exception. Vue CLI est un ensemble d'outils complet pour le développement rapide de Vue. Outre l'échafaudage de projet habituel, il vous permet d'expérimenter de nouvelles idées même sans créer de projet complet, en utilisant sa fonctionnalité de prototypage instantané.

Par défaut, Vue CLI prend en charge les principaux outils et technologies de développement Web, tels que Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Moka, Cypress et Nightwatch. Cela est possible grâce à son système de plug-in extensible. Cela signifie que la communauté peut créer et partager des plugins réutilisables pour des besoins communs.

Mais la cerise sur le gâteau est la puissante interface graphique (Vue UI, fournie avec la CLI), qui vous permet de créer facilement votre projet, puis de le configurer et de le gérer sans éjection.

[1945 Vue CLI

VuePress

Le prochain grand acteur de l’écosystème de Vue est VuePress un générateur de site statique alimenté par Vue. Initialement créé comme un outil pour la rédaction de documentation technique, il s’agit maintenant d’un CMS compact, puissant et sans tête. Depuis la version 1.x, il offre d'excellentes fonctionnalités de blogging et un puissant système de plugins. Il est livré avec un thème par défaut (adapté à la documentation technique), mais vous pouvez également créer des thèmes personnalisés ou utiliser une option prédéfinie de la communauté.

Dans VuePress, vous écrivez le contenu dans Markdown, qui est ensuite transformé en fichiers HTML statiques rendus. Une fois ces fichiers chargés, votre site s'exécute sous la forme d'une application d'une page optimisée par Vue, Vue Router et Webpack.

L'un des principaux avantages de VuePress est que vous pouvez inclure du code Vue ou des composants dans vos fichiers Markdown. Cela vous donne une grande puissance et une grande flexibilité car vous pouvez développer votre site presque comme une application Vue classique, avec tous les avantages qui en découlent.

[1945 VuePress

Gridsome

Gridsome présente de nombreuses similitudes avec VuePress mais présente une approche différente et très puissante en ce qui concerne les sources de données. . Il vous permet de connecter et d'utiliser différents types de données dans votre application, qui sont ensuite unifiées dans une couche GraphQL. Fondamentalement, Gridsome utilise Vue pour les fonctionnalités front-end et GraphQL pour la gestion des données. La façon dont cela fonctionne peut être résumée en trois étapes:

  1. Vous fournissez du contenu dans les formats de données Markdown, JSON, YAML ou CVS, ou vous l'importez depuis un CMS tel que WordPress ou Drupal.
  2. Le contenu est activé. dans la couche GraphQL, qui fournit une gestion centralisée des données. Ensuite, vous utilisez ces données pour créer votre application avec Vue.
  3. Vous déployez des fichiers HTML pré-rendus sur des hôtes Web statiques ou des CDN tels que Netlify, Amazon S3, Now.sh, Surge.sh, etc.

. Certaines des meilleures pratiques prêtes à l'emploi proposées par Gridsome, telles que le fractionnement de code, l'optimisation d'actifs, les images progressives et le prélecture de lien. Gridsome est donc rapide, compatible PWA et compatible SEO

[1945 Gridsome

Vuex

La gestion d'état est l'un des principaux problèmes rencontrés par les développeurs dans les applications Web. bâtiment. Pour résoudre ce problème, Vue propose un système de gestion d'état – Vuex . Il sert de magasin centralisé pour tous les composants d'une application, où l'état ne peut que subir une mutation prévisible. Un magasin est un objet spécial qui est divisé en quatre parties:

  • state – un objet qui stocke les données de l'application
  • getters – un objet contenant des méthodes permettant de résumer l'accès au state
  • mutations – un objet contenant des méthodes affectant directement l'état
  • actions – un objet contenant des méthodes permettant de déclencher des mutations et d'exécuter du code asynchrone

Le magasin peut être également divisé en modules pour une meilleure facilité de maintenance.

Vuex

Nuxt

Lorsqu'il s'agit d'utiliser le rendu côté serveur (SSR), Nuxt est le chemin habituel. C’est un cadre simple et direct pour la construction d’applications universelles. Il est également modulaire, vous ne pouvez donc utiliser que les modules dont vous avez besoin pour votre application.

Avec Nuxt, vous pouvez créer des applications rendues par le serveur (SSR), des applications à page unique (SPA), des applications Web progressives (PWA), ou simplement l'utiliser comme générateur de site statique.

En bref, Nuxt enregistre du travail fastidieux de structuration et d’optimisation de votre application, vous offrant ainsi une expérience de développement simplifiée et plus agréable.

Nuxt

Vuetify

est l'une des plus grandes bibliothèques de composants d'interface utilisateur. Il propose un large ensemble de composants conçus (plus de 80) basés sur les spécifications Material Design, suffisants pour la plupart des besoins de l’application.

Vous pouvez l'utiliser pour créer des applications SSR, des SPA, des PWA et des applications mobiles. Vous pouvez démarrer de nouvelles applications ou les ajouter à des applications existantes. Il propose des thèmes gratuits et premium, mais vous pouvez également créer les vôtres. Il fournit également un système permettant de sélectionner uniquement les composants utilisés, réduisant ainsi considérablement la taille finale de votre application.

Tous les composants de Vuetify sont très bien documentés et des exemples clairs sont fournis.

Vuetify [1369034] 19659041] Quasar

Quasar est la version JavaScript de la philosophie Java "écrivez une fois, courez partout". C’est un framework universel, basé sur Vue, qui vous permet d’écrire des applications pour différentes plates-formes avec la même base de code. SPA, PWA, applications SSR, applications mobiles hybrides ou applications de bureau multi-plateformes, vous l'appelez!

Il possède une excellente documentation et un ensemble considérable de composants conçus pour la performance et la réactivité. Quasar intègre les meilleures pratiques (minification HTML / CSS / JS, suppression du cache, tremblement d’arbres, mappage de source, division de code avec chargement différé, transpiling ES6, filtrage de code, accessibilité) afin que vous puissiez vous concentrer principalement sur les fonctionnalités de votre application. Il fournit également un outil CLI pour l’échafaudage sans effort de nouveaux projets.

[1945 Quasar

Storybook

Vue est un cadre principalement basé sur des composants. Il est donc essentiel pour chaque développeur d'applications d'écrire des composants efficaces. Dans cette entreprise Storybook pourrait s'avérer très utile. Il vous permet de développer, de gérer et de tester des composants d'interface utilisateur dans un environnement facile à utiliser et isolé. Cet outil permet aux développeurs de créer des composants indépendamment de l'application principale et de les présenter de manière interactive dans un environnement de développement isolé, sans se soucier des dépendances et des exigences propres à chaque application. Comme vous le souhaitez. Vous pouvez également exporter en tant qu'application Web statique et déployer votre projet sur n'importe quel serveur HTTP.

[1945 Storybook

Vue Apollo

GraphQL suscite beaucoup d'intérêt. Donc, si vous le connaissez déjà et souhaitez l’intégrer à Vue, vous devriez essayer Vue Apollo . Cette bibliothèque rend l'utilisation de Vue et GraphQL / Apollo harmonieuse et agréable.

[1945 Vue Apollo

Eagle.js

Eagle.js est un système de diaporama puissant, flexible et unique construit avec Vue. Il vous permet de créer des composants, des diapositives et des styles faciles à réutiliser dans vos présentations. Il prend également en charge les animations, les thèmes et les widgets interactifs qui sont parfaits pour la réalisation de démonstrations Web. Eagle.js a une API simple et hackable, vous permettant ainsi de créer les diaporamas que vous souhaitez.

L'une des meilleures choses à faire avec cette bibliothèque est de placer une diapositive dans un fichier séparé, puis de la réutiliser dans d'autres diaporamas. Vous pouvez également importer les diapositives d'un diaporama particulier dans un autre. Avec un outil aussi puissant, vous pouvez faire des présentations complexes, interactives et amusantes.

Eagle.js

Voici un petit bonus pour vous: cinq autres outils et bibliothèques qui méritent votre attention.

  • Vue DevTools est une excellente extension de navigateur pour le débogage des applications Vue et Vuex.
  • Vue Test Utils est une collection d'utilitaires utiles pour tester les composants Vue.
  • Vue Le routeur est le routeur officiel de Vue.
  • Vue Native est un framework JavaScript pour applications mobiles, similaire à React Native.
  • Weex est un framework permettant de créer des applications mobiles avec les technologies Web modernes, y compris Vue. [[19659062] Conclusion

    Vous disposez maintenant des outils nécessaires pour construire des projets géniaux, quels qu'ils soient: sites Web, applications, bibliothèques, plugins, la liste s'allonge. Construis quelque chose de grand!

    Comme tout être humain, je suis limité à mes connaissances et à mes préférences personnelles, et il se peut que j’ai manqué un outil important ou une bibliothèque. Nous sommes impatients d’entendre parler de tous les autres excellents outils proposés dans les commentaires.




Source link