Comment construire une bibliothèque de composants avec Vue?

La construction d'une bibliothèque de composants Vue nécessite la conception de la structure autour du scénario d'entreprise et le suivi du processus complet de développement, de test et de libération. 1. La conception structurelle doit être classée par des modules fonctionnels, y compris les composants de base, les composants de mise en page et les composants commerciaux; 2. Utilisez des variables SCSS ou CSS pour unifier le sujet et le style; 3. Unifier les spécifications de dénomination et introduire Eslint et plus joli pour assurer le style de code cohérent; 4. Afficher l'utilisation des composants dans le site de document de support; 5. Utilisez VITE et d'autres outils pour emballer en tant que packages NPM et configurer les rolupoptions; 6. Suivez la spécification SEMVER pour gérer les versions et les modifications modifiées lors de la publication.

Le cœur de la construction d'une bibliothèque de composants Vue est d'avoir une structure claire, une maintenance solide et une réutilisation facile . Il ne s'agit pas seulement de rassembler les composants, mais de former un ensemble de processus de la conception, du développement, des tests à libérer.

Conception structurelle de la bibliothèque des composants: réfléchissez d'abord à la façon de l'organiser

La bibliothèque de composants n'est pas aussi complète que possible, mais la structure doit être conçue autour du scénario commercial . Vous pouvez le classer par des modules fonctionnels, tels que les composants de base (boutons, les boîtes d'entrée), les composants de mise en page (conteneurs, grilles), les composants commerciaux (formulaires, encapulations de table), etc.

• Composants de base : le plus polyvalent et ne compose pas sur une logique métier spécifique
• Composants d'entreprise : basé sur l'encapsulation de base des composants, qui peut contenir des appels d'interface ou un traitement de données spécifique
• Gestion du thème et du style : il est recommandé d'utiliser des variables SCSS ou CSS pour faciliter l'unification du style et de la personnalisation

Planifiez la structure du répertoire depuis le début, par exemple:

 composants /
  base/
    Bouton.vue
    Entrée.vue
  mise en page/
    Conteneur.vue
  entreprise/
    Utilisable.vue
styles /
  variables.SCSS
utils /
  index.js

Cela rend non seulement la collaboration d'équipe plus fluide, mais facilite également la croissance plus tard.

Spécifications de développement: Style de codage unifié et règles de dénomination

Dans le projet VUe, il est recommandé d'unifier la dénomination de Pascalcase, les accessoires et d'émettre pour garder la sémantique claire. Par exemple:

 accessoires: {
  étiquette: chaîne,
  Iséchargement: booléen
},
Émettent: [«Mise à jour: chargement», «soumettre»]

Dans le même temps, c'est une bonne habitude d'introduire Eslint et plus joli, ce qui peut assurer le style de code cohérent lorsque plusieurs personnes collaborent.

Si vous prévoyez de le libérer, il est recommandé que chaque composant fournisse des instructions de démonstration et de documentation. Vous pouvez utiliser VitePress ou VuePress pour écrire un site de document pour afficher l'utilisation et les effets des composants.

Emballage et publication: rendre la bibliothèque des composants vraiment disponible

Une fois le développement local terminé, l'étape suivante consiste à l'emballer dans un package NPM. Vous pouvez choisir de construire avec Vite, Rollup ou WebPack.

Prendre un exemple comme exemple, configurez le mode build.lib pour générer des fichiers de bibliothèque de composants:

 construire: {
  lib: {
    Entrée: Path.resolve (__ dirname, 'src / index.js'),
    Nom: «MyComponentLibrary»,
    nom de fichier: (format) => `my-composant-library. $ {format} .js`
  },
  rollupoptions: {
    externe: ['vue'],
    sortir: {
      Globals: {
        Vue: 'Vue'
      }
    }
  }
}

Une fois l'emballage terminé, n'oubliez pas de définir les fichiers d'entrée et les dépendances corrects dans package.json . S'il s'agit d'une bibliothèque de composants privés, il peut également être intégré au projet via le NPM privé ou le sous-module GIT.

De plus, le contrôle de la version est également important. Chaque fois que vous mettez à jour le contenu du composant, n'oubliez pas d'utiliser semver pour mettre à jour le numéro de version et soumettre le Changelog.

Fondamentalement, c'est tout. La bibliothèque de composants ne se termine pas en un seul coup. Il nécessite une itération continue, une optimisation de l'expérience et un ajustement continu conformément à l'utilisation réelle de l'équipe. Tant que vous installez l'étagère au début, vous ne serez pas trop fatigué pour le maintenir plus tard.

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!