10+ meilleurs outils et bibliothèques Vue.js (Partager)

Vue continue d'être populaire et rapidement adopté par de nombreux développeurs, et les outils Vue.js sont largement disponibles. Ce n'est pas déraisonnable : la courbe d'apprentissage peu profonde de Vue, sa structure claire axée sur les fonctionnalités et son excellente documentation facilitent le démarrage pour les débutants, tandis que les développeurs expérimentés peuvent passer d'autres frameworks comme React ou Angular.

Si vous prenez le développement de Vue au sérieux, vous rencontrerez tôt ou tard des outils et des bibliothèques essentiels qui se démarquent. Leur utilisation peut faire progresser votre carrière de développeur Vue et vous faire sentir comme un expert.

J'ai compilé une liste des outils et bibliothèques les plus connus que vous devriez connaître et éventuellement utiliser dans vos projets Vue.js. Contrairement à de nombreux autres articles qui répertorient uniquement les bibliothèques de composants d'interface utilisateur, cette compilation explore le large éventail d'outils, de bibliothèques et de plugins de l'écosystème Vue.

Je les ai choisis en fonction de leur utilité, de leur efficacité et de leur caractère unique, et non en fonction de leur popularité sur GitHub ou de leur nombre d'étoiles.

Vue CLI

Il semble que disposer d'une sorte d'outil CLI soit un must pour chaque framework d'application JavaScript de nos jours. Vue ne fait pas exception. Vue CLI est un ensemble d'outils complet pour le développement rapide de Vue. En plus de l'échafaudage de projet habituel, il vous permet également d'essayer de nouvelles idées sans même créer un projet complet grâce à ses capacités 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, Mocha, Cypress et Nightwatch. C'est grâce à son système de plugins 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, livrée avec la CLI), qui vous permet de créer facilement des projets, puis de les configurer et de les gérer sans avoir besoin de popups.

Cliquez ici pour voir :Vue CLI

VuePress

Dans Vue écosystème Le prochain acteur majeur est VuePress, un générateur de sites statiques alimenté par Vue. Créé à l’origine comme un outil de rédaction de documentation technique, il s’agit désormais d’un petit CMS sans tête, compact et puissant. À partir de la version 1.x, il offre d'excellentes fonctions de blog et un puissant système de plug-ins. Il est livré avec un thème par défaut (selon la documentation technique), mais vous pouvez également créer un thème personnalisé ou utiliser des options prédéfinies de la communauté.

Dans VuePress, vous pouvez écrire du contenu dans Markdown, puis le convertir en un fichier HTML statique pré-rendu. Une fois ces fichiers chargés, votre site fonctionnera comme une application d'une seule page alimentée par Vue, Vue Router et Webpack.

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

Cliquez ici pour voir :VuePress

Gridsome

Gridsome Présente de nombreuses similitudes avec VuePress, mais adopte une approche très puissante lorsqu'il s'agit de sources de données. Il vous permet de vous connecter et de consommer une variété de données de votre application, puis d'unifier ces données dans une couche GraphQL. Fondamentalement, Gridsome utilise Vue pour les fonctionnalités frontales et GraphQL pour la gestion des données. Son fonctionnement peut être résumé en ces trois étapes :

• Vous fournissez du contenu aux formats de données Markdown, JSON, YAML ou CVS, ou importez du contenu depuis un CMS comme WordPress ou Drupal. Le contenu

• est converti en une couche GraphQL, qui permet une gestion centralisée des données. Vous pouvez ensuite utiliser ces données pour créer votre application via Vue.

• Vous pouvez déployer des fichiers HTML pré-rendus sur un hébergeur Web statique ou un CDN tel que Netlify, Amazon S3, Now.sh, Surge.sh, etc.

Gridsome fournit d'excellentes pratiques telles que le fractionnement du code, l'optimisation des actifs, la prélecture progressive des images et des liens. Par conséquent, Gridsome est rapide, prêt pour PWA et convivial pour le référencement.

Cliquez ici pour voir : Gridsome

Vuex

La gestion de l'état est l'un des problèmes majeurs auxquels les développeurs sont confrontés lors de la création d'applications Web. Pour résoudre ce problème, Vue fournit un système de gestion d'état Vuex. Il agit comme un magasin centralisé pour tous les composants de l'application, dont l'état ne peut changer que de manière prévisible. Le magasin est un objet spécial divisé en quatre parties :

• state – un objet qui stocke les données de l'application

• getters – contient un objet qui méthodes abstraites pour accéder à l'état

• mutations – Un objet qui contient des méthodes qui affectent directement l'état

• actions – Un objet qui contient des méthodes pour déclenchement des mutations et de l'exécution Le magasin d'objets

de méthodes de code asynchrone peut également être divisé en plusieurs modules pour obtenir une meilleure maintenabilité.

Cliquez ici pour afficher : Vuex

Nuxt

en utilisant le côté serveur rendu (SSR), utilisez généralement Nuxt. Il s'agit d'un cadre simple et direct pour créer des applications universelles. Il est également modulaire, vous ne pouvez donc utiliser que les modules requis par votre application.

En utilisant Nuxt, vous pouvez créer des applications rendues par un serveur (SSR), des applications monopage (SPA), des applications Web progressives (PWA) ou simplement l'utiliser comme générateur de site statique.

En bref, Nuxt vous libère du travail fastidieux de structuration et d'optimisation de votre application, vous offrant une expérience de développement rationalisée et plus agréable.

Cliquez ici pour voir : Nuxt

Vuetify

Vuetify est l'une des meilleures bibliothèques de composants d'interface utilisateur actuellement disponibles. Il fournit un grand nombre de composants bien conçus (plus de 80) basés sur la spécification Material Design pour répondre aux besoins de presque toutes les applications.

Vous pouvez l'utiliser pour créer des applications SSR, SPA, PWA et mobiles. Vous pouvez lancer une nouvelle application ou l'ajouter à une application existante. 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 et de sélectionner uniquement les composants utilisés, réduisant considérablement la taille finale de l'application.

Tous les composants de Vuetify sont bien documentés, avec des exemples clairs fournis.

Cliquez ici pour voir : Vuetify

Quasar

Quasar est la version JavaScript de la philosophie Java « écrire une fois, exécuter n'importe où ». Il s'agit d'un framework universel compatible Vue qui vous permet d'écrire des applications pour différentes plates-formes en utilisant la même base de code. spas, pwas, applications ssr, applications mobiles hybrides ou applications de bureau multiplateformes, à vous de choisir !

Il contient une excellente documentation et des tonnes de composants, conçus dans un souci de performance et de réactivité. Quasar intègre les meilleures pratiques (minification html/css/js, contournement du cache, tremblement d'arborescence, mappage des sources, fractionnement du code pour le chargement paresseux, transports es6, linting de code, accessibilité) par défaut afin que vous puissiez vous concentrer principalement sur les fonctionnalités de votre programme d'application. Il fournit également un outil cli pour faciliter la création de nouveaux projets.

Cliquez ici pour voir : Quasar

Livre d'histoires

Vue est avant tout un framework basé sur des composants, donc des composants bien écrits et efficaces sont cruciaux pour chaque développeur d'applications. Storybook pourrait s'avérer utile pendant ce processus. Il vous permet de développer, gérer et tester des composants d’interface utilisateur dans un environnement isolé et facile à utiliser. L'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 avoir à se soucier des dépendances et des exigences spécifiques à l'application.

Storybook propose de nombreux modules complémentaires, ainsi qu'une API flexible pour personnaliser Storybook en fonction de vos besoins. Il est également possible d'exporter une application web statique et de déployer le projet sur n'importe quel serveur HTTP.

Cliquez ici pour voir : Livre d'histoires

Vue Apollo

Il y a eu beaucoup de discussions sur GraphQL récemment. Donc, si vous le connaissez déjà et souhaitez l'intégrer à Vue, vous devriez essayer Vue Apollo. Cette bibliothèque rend le travail avec Vue et GraphQL/Apollo plus fluide et plus agréable.

Cliquez ici pour voir : Vue Apollo

Eagle.js

Eagle.js est un système de diaporama puissant, flexible et unique construit à l'aide de Vue. Il vous permet de créer des composants, des diapositives et des styles facilement réutilisables dans vos présentations. Il prend également en charge les animations, les thèmes et les widgets interactifs, ce qui le rend idéal pour réaliser des présentations Web. Eagle.js dispose d'une API simple et facile à pirater, vous avez donc une réelle liberté pour créer les diaporamas que vous souhaitez.

L'une des choses les plus importantes que vous puissiez faire avec cette bibliothèque est de placer les diapositives dans des fichiers séparés qui peuvent ensuite être réutilisés dans d'autres diaporamas. Vous pouvez également importer des diapositives d'une diapositive spécifique vers une autre diapositive. Avec un outil aussi puissant, vous pouvez créer des présentations complexes, interactives et divertissantes.

Cliquez ici pour voir : Eagle.js

5 outils et bibliothèques Vue plus célèbres

• Vue DevTools est une excellente extension de navigateur pour déboguer les applications Vue et Vuex.

• Vue Test Utils est une collection d'utilitaires utiles pour tester les composants Vue.

• Vue Router est l'itinéraire 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 utilisant les technologies Web modernes, dont Vue.

Adresse originale : https://www.zeolearn.com/interview-questions/vue-js

Recommandations associées :

Un résumé des questions d'entretien Front-end Vue en 2020 (avec réponses)

Recommandation du tutoriel Vue : la dernière vidéo 5 vue.js tutoriels sélectionnés en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!