Comment créer une bibliothèque de composants de vue publique frontale

Avant-propos

Pendant le processus de développement, notre page était très complexe, obligeant chaque membre de l'équipe à développer indépendamment une fonction, et enfin à s'engager dans un combat. Cela nécessite une bibliothèque de composants publique afin que chacun puisse utiliser des composants communs pour accélérer le développement et améliorer son efficacité.

Vue.js est l'un des frameworks front-end les plus en vogue à l'heure actuelle et est adopté par de nombreuses entreprises au pays et à l'étranger. Par conséquent, dans la pratique, comment créer une bibliothèque de composants Vue.js adaptée à votre propre entreprise deviendra un cours obligatoire pour de nombreuses équipes ayant besoin d'un framework.

Cet article vous guidera étape par étape pour créer une bibliothèque de composants Vue.js adaptée à votre entreprise pour votre référence.

1. Construction d'une bibliothèque de composants

Le composant Vue est un concept abstrait, qui consiste à encapsuler certaines structures et styles DOM complexes de l'interface dans un composant indépendant, afin que plusieurs interfaces puissent le référencer pour traiter leur logique métier respective.

1. Déterminer la solution technique pour la bibliothèque de composants

Avant de créer la bibliothèque de composants, nous devons déterminer la solution technique pour la bibliothèque de composants. Il existe deux solutions courantes : l'introduction de composants via des bibliothèques tierces et le développement de composants indépendamment.

L'introduction de composants via une bibliothèque tierce peut utiliser la bibliothèque de composants tierce pour améliorer l'efficacité du développement et les coûts de maintenance. L'inconvénient est qu'elle doit être conforme aux spécifications de la bibliothèque de composants tierce et que la flexibilité est relative. pauvre.

Composants développés indépendamment, vous pouvez librement personnaliser la bibliothèque de composants et vous conformer aux spécifications de l'entreprise, mais cela nécessite plus d'efforts en matière de développement, de maintenance et de mises à jour.

En fonction de la situation réelle, nous choisissons de développer des composants de manière indépendante pour faciliter la gestion et la maintenance.

2. Initialisez le projet

Utilisez Vue CLI 3 pour créer rapidement le squelette du projet.

    $ vue create my-component-lib
    $ cd my-component-lib

Ici, nous choisissons la configuration manuelle, en utilisant babel, router et vuex.

Ensuite, nous ajoutons moins de soutien au projet.

    $ npm install less less-loader node-sass sass-loader -D

Après l'installation, nous pouvons créer un nouveau dossier d'actifs sous le dossier src et ajouter un fichier de style index.less pour le contrôle de style de l'ensemble de la bibliothèque de composants.

3. Développer des composants

Sous le dossier src, créez un dossier de composants pour placer les composants développés. Dans le même temps, afin de faciliter la maintenance et la visualisation, nous pouvons créer un autre fichier index.js sous le dossier du composant. Chaque composant nécessite un dossier distinct pour la gestion.

Ici, nous écrivons un exemple de composant de HelloWord.vue pour démontrer le développement de la bibliothèque de composants.

    <template>
      <div class="hello-world">
        <h1>Hello World</h1>
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        message: {
          type: String,
          default: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <style scoped>
    .hello-world {
      font-size: 14px;
      line-height: 24px;
      color: #333;
    }
    </style>

Remarque : le style CSS du composant doit ajouter l'attribut scoped afin que le style du composant actuel n'affecte pas les autres composants.

4. Enregistrement des composants

Il existe deux manières principales d'enregistrer des composants : l'enregistrement global et l'enregistrement local.

L'enregistrement global nous permet de référencer des composants n'importe où, tandis que l'enregistrement local ne peut être utilisé que dans le composant actuel. Bien entendu, pour faciliter la gestion, nous enregistrerons les composants dans un fichier spécial.

Enregistrez le composant dans le fichier d'entrée du projet src/main.js :

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import HelloWorld from '@/components/HelloWorld'

    Vue.config.productionTip = false

    Vue.component('HelloWorld', HelloWorld)

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

À ce stade, nous pouvons utiliser le composant HelloWorld dans le projet.

    <template>
      <div class="container">
        <HelloWorld message="Welcome to my component library" />
      </div>
    </template>

2. Sortie de la bibliothèque de composants

Une fois la bibliothèque de composants développée, nous devons la publier sur npm afin que les développeurs puissent télécharger et utiliser notre bibliothèque de composants via npm.

1. Configurez la commande d'empaquetage

Dans le fichier package.json, ajoutez la commande suivante :

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lib": "vue-cli-service build --target lib --name my-component-lib ./src/components/index.js"
    }

Dans la commande ci-dessus, nous avons personnalisé une commande lib pour empaqueter la bibliothèque de composants. Les fichiers générés après l'empaquetage seront placés. dans le dossier dist.

2. Configuration de packaging personnalisée

Afin de rendre les composants packagés plus adaptés à l'utilisation, nous devons créer un nouveau fichier vue.config.js dans le répertoire racine du projet et ajouter le code suivant :

    module.exports = {
      // 组件库名称
      outputDir: 'my-component-lib',
    
      // 配置打包的全局入口组件
      configureWebpack: {
        output: {
          libraryExport: 'default'
        },
        externals: {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
          }
        }
      },
    
      // 配置如何处理一些特殊的 CSS，如全局 CSS 的提取
      css: {
        extract: {
          filename: 'css/[name].css'
        }
      }
    }

Parmi eux, le paramètre outputDir représente le répertoire de sortie de l'empaquetage ; le paramètre configureWebpack représente la configuration du webpack. Vous devez définir l'entrée packagée et libraryExport par défaut, de sorte que lors de l'importation de la bibliothèque de composants, vous n'ayez qu'à importer X depuis 'my-component-lib'. , et il n'est pas nécessaire d'importer la valeur par défaut depuis X ; Le paramètre externals représente la configuration du webpack et le Vue.js importé est ignoré.

3. Version de la bibliothèque de composants

Exécutez la commande npm run lib pour empaqueter la bibliothèque de composants :

    $ npm run lib

Une fois l'empaquetage terminé, publiez-la sur npm :

    $ npm login
    $ npm publish

Dans d'autres projets, installez-la via npm install my-component- lib Bibliothèque de composants :

    import HelloWorld from 'my-component-lib/components/HelloWorld'

    Vue.component('HelloWorld', HelloWorld)

3. Gestion des versions de la bibliothèque de composants

Lors du développement d'une bibliothèque de composants, la gestion des versions est très importante. Si nous ne gérons pas les versions des bibliothèques de composants, nous ne pourrons rien faire une fois un bug découvert. De plus, il y aura inévitablement des problèmes d'itération des versions au cours du processus de développement. Si les versions ne sont pas gérées, cela sera très déroutant et affectera l'efficacité du développement de l'équipe.

La méthode de gestion des versions est basée sur la gestion des branches Git. Chaque version correspond à une branche sur Git. Lors du processus de développement, chaque branche doit être développée et testée en conséquence, puis fusionnée dans la branche principale pour publier la version.

4. Conclusion

Grâce à l'introduction de cet article, je pense que tout le monde sait déjà comment créer une bibliothèque de composants Vue.js adaptée à sa propre entreprise et la publier avec succès sur npm. Le développement de bibliothèques de composants est l'un des problèmes que l'équipe de développement front-end doit résoudre. Par conséquent, nous devons maîtriser de manière flexible les connaissances pertinentes en matière de développement et de gestion de bibliothèques de composants pour contribuer au développement de l'entreprise et de lui-même.

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!