Guide pour construire une bibliothèque de composants Vue.js

Bienvenue ! 👋

Au départ, cette série était censée être un seul article, mais il est rapidement devenu évident qu'elle serait trop longue. Même GitHub ne voulait pas l'afficher dans l'onglet des fichiers des pull requests. Par conséquent, j'ai décidé de la diviser en plusieurs articles pour la rendre plus digeste et pour me concentrer sur chaque partie individuellement.

Cette série est en quelque sorte une suite de l'article La Méthode la Plus Simple pour Créer une Bibliothèque de Composants Vue.js, mais elle adopte une approche plus professionnelle. Vous apprendrez comment les bibliothèques de composants les plus populaires sont construites dans les coulisses et comment créer la vôtre.

Bien que ce soit toujours ma méthode préférée lorsque je suis certain de ce que je veux réaliser, j'ai également reçu des retours de lecteurs cherchant un comportement plus personnalisé et nécessitant des fonctionnalités plus complexes.

C'est compréhensible. Bien que unbuild soit un outil puissant, il ne peut égaler la flexibilité, l'écosystème de plugins et l'adoption de Vite.

Tout au long de cette série, nous aborderons les sujets suivants :

1. Prise en Main avec Monorepo, Linter et Formatter : Nous mettrons en place un monorepo pour gérer notre bibliothèque de composants et tous les outils nécessaires pour garantir une bonne expérience de développement. Nous configurerons également ESLint pour assurer la cohérence du code.
2. Création d'un Premier Composant avec Vue.js et Tailwind CSS : Nous créerons notre premier composant avec Vue.js, Tailwind CSS et Tailwind Variants en utilisant les techniques les plus avancées et puissantes employées dans des bibliothèques de composants populaires comme Radix Vue et Nuxt UI.
3. Une Meilleure Expérience de Développement avec TypeScript et TSConfig : Nous améliorerons notre expérience de développement en ajoutant TypeScript à notre bibliothèque de composants et en configurant TSConfig pour nous assurer que nos composants sont correctement typés et que nous pouvons tirer pleinement parti des fonctionnalités de TypeScript.
4. Tests Automatiques des Composants avec Vitest et Testing Library : Nous écrirons des tests pour nos composants en utilisant Vitest et Testing Library pour garantir que nos composants fonctionnent comme prévu. Cela est crucial pour une bibliothèque de composants professionnelle qui reste fiable dans le temps.
5. Livraison Continue et Confiance dans les Composants : Nous établirons un processus d'intégration continue pour garantir que nos composants sont toujours livrés avec confiance. Pour chaque commit de chaque branche, nous exécuterons nos tests pour vérifier que tout fonctionne correctement. Nous établirons également un processus de publication pour publier nos composants sur npm.
6. Création d'un Playground et d'un Storybook pour les Composants : Nous créerons un playground pour tester nos composants dans un environnement réel et un storybook avec Histoire pour les documenter. Cela nous permettra de partager nos composants avec d'autres développeurs et de les tester dans divers scénarios, tant en isolation qu'en combinaison.
7. Amélioration de l'Intégration avec Unplugin et le Module Nuxt : Nous améliorerons l'intégration de notre bibliothèque de composants avec l'écosystème en créant un plugin Vite avec Unplugin Vue Components et un module Nuxt pour utiliser nos composants dans une application Nuxt.

À la fin de cette série, vous aurez une bibliothèque de composants Vue.js complète que vous pourrez utiliser dans vos projets ou partager avec la communauté, comme un développeur professionnel. N'est-ce pas excitant ? 😎

N'hésitez pas à commenter ci-dessous si vous avez des questions ou des suggestions. Commençons !