Bases du développement VUE3 : développer à l'aide des plug-ins personnalisés Vue.js

Alors que Vue.js devient de plus en plus l'un des frameworks préférés pour le développement front-end, de plus en plus de développeurs commencent à s'impliquer dans le développement de plug-ins Vue.js. Le plug-in Vue.js est un composant fonctionnel qui peut être installé et réutilisé globalement. Il peut améliorer les fonctions de Vue.js lui-même et ajouter de nouvelles fonctions au framework Vue.js. Dans Vue.js version 3.0, le développement de plug-ins est plus simple et plus pratique. Cet article explique comment utiliser le développement de plug-ins personnalisés Vue.js.

1. Qu'est-ce qu'un plug-in Vue.js ?

Le plug-in Vue.js est un composant indépendant utilisé pour améliorer les fonctions du framework Vue.js. Il peut fournir de nouvelles instructions, filtres, composants et autres. fonctions pour Vue.js. Tout d'abord, nous devons être clairs : les plug-ins Vue.js ne sont pas des composants chargés dans le cadre de l'application Vue.js, mais des composants chargés et initialisés dans le cadre de Vue.js lui-même. Les plug-ins Vue.js peuvent être facilement introduits et utilisés par d'autres développeurs, ce qui nous facilite la mise en œuvre des applications Vue.js.

2. Utilisation du plug-in Vue.js

L'utilisation du plug-in Vue.js est divisée en deux étapes. Tout d'abord, nous devons installer le plugin dans Vue.js avant de pouvoir l'utiliser dans notre application.

1. Installation de plugins

Dans une application Vue.js, nous devons utiliser la méthode Vue.use() pour installer des plugins. Cette méthode reçoit un objet plugin en tant que paramètre et installe l'objet plugin dans l'application Vue.js.

Par exemple, nous avons écrit un objet plug-in nommé MyPlugin :

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;
    // 在此处注册新的指令、过滤器、组件等。
  }
}

Dans l'objet plug-in, nous définissons une méthode install(), dans laquelle l'opération d'initialisation du plug-in peut être effectuée. Dans la méthode install(), nous pouvons enregistrer des directives globales, des filtres, des composants, etc. Dans le même temps, nous devons également conserver un attribut installé dans l'objet plug-in pour déterminer si le plug-in actuel a été installé et éviter une installation répétée.

Ensuite, nous utilisons la méthode Vue.use() dans l'application Vue.js pour installer le plugin :

import Vue from 'vue';
import MyPlugin from './my-plugin';

Vue.use(MyPlugin, { someOption: true });

Ici, nous introduisons l'objet plugin MyPlugin en utilisant la syntaxe d'importation d'ES6 et passons l'objet en tant que paramètres d'utilisation. () méthode. De plus, nous pouvons passer un objet options à la méthode Vue.use() pour configurer le plugin lors de son initialisation. Dans la méthode install() de l'objet plug-in MyPlugin, nous pouvons accéder à ces options de configuration via le paramètre options.

2. Utilisation de plugins

Maintenant que nous avons installé le plugin dans notre application Vue.js, nous pouvons utiliser la fonctionnalité fournie par le plugin. Les fonctions du plug-in Vue.js peuvent être utilisées globalement ou localement.

Dans une application Vue.js, nous pouvons utiliser la méthode Vue.directive() pour enregistrer des directives globales, la méthode Vue.filter() pour enregistrer des filtres globaux, la méthode Vue.component() pour enregistrer des composants globaux, etc. Par exemple, nous avons enregistré un composant nommé my-component dans la méthode install() de l'objet plug-in MyPlugin :

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    Vue.component('my-component', {
      /* 组件选项 */
    })
  }
}

Ensuite, dans notre application Vue.js, nous pouvons utiliser les composants fournis avec Vue.js. Utilisez ceci composant de la même manière.

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  // 组件选项
}
</script>

Notez que lors de l'enregistrement d'un composant global, le nom du composant doit commencer par une lettre minuscule et utiliser des tirets pour relier plusieurs mots dans le modèle.

Si nous souhaitons utiliser la fonction du plug-in uniquement dans une certaine page ou un certain composant, nous pouvons également enregistrer le plug-in localement dans la page ou le composant :

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyPlugin from '@/my-plugin';

export default {
  components: {
    'my-component': MyPlugin.myComponent
  }
}
</script>

Ici, nous utilisons la syntaxe d'importation ES6 pour introduire le MyPlugin objet de plug-in et cet objet est enregistré en tant qu'objet de composant qui doit être utilisé dans les composants locaux.

3. Exemple d'utilisation de plug-ins

Maintenant, regardons un exemple de développement à l'aide du plug-in personnalisé Vue.js. Supposons que nous devions développer un indicateur de chargement global qui s'affichera et se masquera automatiquement lorsque l'application effectuera des opérations asynchrones. Nous pouvons écrire un plug-in appelé LoadingIndicator pour implémenter cette fonction :

const LoadingIndicator = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    const indicator = new Vue({
      template: `
        <div v-if="loading" class="loading-indicator">
          <div class="loading-spinner"></div>
        </div>
      `,
      data() {
        return {
          loading: false
        }
      }
    })

    const mountIndicator = () => {
      const component = indicator.$mount();
      document.body.appendChild(component.$el);
    }

    Vue.prototype.$loading = {
      show() {
        indicator.loading = true;
        mountIndicator();
      },
      hide() {
        indicator.loading = false;
        document.body.removeChild(indicator.$el);
      }
    };

    Vue.mixin({
      beforeCreate() {
        this.$loading = Vue.prototype.$loading;
      }
    });
  }
}

export default LoadingIndicator;

Dans la méthode install() de l'objet plug-in LoadingIndicator, nous définissons d'abord une instance Vue comme modèle de l'indicateur. Après cela, nous avons monté l'instance Vue sur l'élément body et défini une API globale $loading pour contrôler globalement l'affichage et le masquage de l'indicateur. En parallèle, nous avons défini un mixin global dans la méthode Vue.mixin() afin que chaque composant puisse accéder à l'API $loading.

Maintenant, nous avons écrit un plugin LoadingIndicator qui peut être utilisé dans le monde entier. Utiliser le plugin dans une application Vue.js est très simple :

import Vue from 'vue';
import LoadingIndicator from '@/loading-indicator';

Vue.use(LoadingIndicator);

// 在异步操作开始时显示加载指示器
this.$loading.show();

// 在异步操作完成后隐藏加载指示器
this.$loading.hide();

Ici, nous installons d'abord le plugin LoadingIndicator dans l'application Vue.js en utilisant la méthode Vue.use(). Ensuite, nous appelons la méthode this.$loading.show() dans le bloc de code qui nécessite une opération asynchrone pour afficher l'indicateur de chargement, puis appelons la méthode this.$loading.hide() pour masquer l'indicateur de chargement une fois l'opération asynchrone terminée. .

Résumé

Le plug-in Vue.js est une fonctionnalité puissante qui peut facilement étendre les fonctionnalités du framework Vue.js. Avec la sortie de Vue.js 3.0, le développement et l'utilisation de plug-ins sont devenus plus pratiques et plus flexibles. Dans cet article, nous avons présenté comment installer des plug-ins via la méthode Vue.use(), comment enregistrer des directives globales, des filtres et des composants, et comment utiliser des plug-ins localement dans une page ou un composant. Enfin, nous avons également utilisé un exemple de plug-in d'indicateur de chargement global pour démontrer l'application pratique du développement de plug-in Vue.js.

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!