VUE3 開発の基本: Vue.js カスタム プラグインを使用した開発

Vue.js がフロントエンド開発に推奨されるフレームワークの 1 つになるにつれて、ますます多くの開発者が Vue.js プラグイン開発に参加し始めています。 Vue.js プラグインは、グローバルにインストールして再利用できる機能コンポーネントであり、Vue.js 自体の機能を強化したり、Vue.js フレームワークに新しい機能を追加したりできます。 Vue.js バージョン 3.0 では、プラグイン開発がより簡単かつ便利になりましたので、この記事では、Vue.js カスタム プラグインを開発に使用する方法を紹介します。

1. Vue.js プラグインとは

Vue.js プラグインは、Vue.js フレームワークの機能を強化するために使用される独立したコンポーネントであり、新しい命令を提供できます。 Vue.js デバイス、コンポーネント、その他の機能のフィルター。まず最初に、明確にする必要があります。Vue.js プラグインは、Vue.js アプリケーションの一部としてロードされるコンポーネントではなく、Vue.js 自体の一部としてロードおよび初期化されるコンポーネントです。 Vue.js プラグインは他の開発者が簡単に導入して使用できるため、Vue.js アプリケーションの実装が容易になります。

2. Vue.js プラグインの使用

Vue.js プラグインの使用は 2 つのステップに分かれています。まず、アプリケーションで使用する前に、プラグインを Vue.js にインストールする必要があります。

1. プラグインのインストール

Vue.js アプリケーションでは、Vue.use() メソッドを使用してプラグインをインストールする必要があります。このメソッドはプラグイン オブジェクトをパラメーターとして受け取り、そのプラグイン オブジェクトを Vue.js アプリケーションにインストールします。

たとえば、MyPlugin という名前のプラグイン オブジェクトを作成しました。

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

このプラグイン オブジェクトでは、プラグインの初期化を行う install() メソッドを定義します。実行できます。 install() メソッドでは、グローバル ディレクティブ、フィルター、コンポーネントなどを登録できます。同時に、現在のプラグインがインストールされているかどうかを判断し、インストールの繰り返しを回避するために、プラグイン オブジェクトの installed 属性を維持する必要もあります。

次に、Vue.js アプリケーションの Vue.use() メソッドを使用してプラグインをインストールします。

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

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

ここでは、ES6 インポート構文を使用して MyPlugin プラグイン オブジェクトを導入します。そして、そのオブジェクトを Vue.use() メソッドのパラメータとして使用します。さらに、初期化時にプラグインを構成するために、オプション オブジェクトを Vue.use() メソッドに渡すことができます。 MyPlugin プラグイン オブジェクトの install() メソッドでは、options パラメーターを介してこれらの構成オプションにアクセスできます。

2. プラグインの使用

Vue.js アプリケーションにプラグインをインストールしたので、プラグインが提供する機能を使用できるようになります。 Vue.js プラグインの機能は、グローバルまたはローカルで使用できます。

Vue.js アプリケーションでは、Vue.directive() メソッドを使用してグローバル ディレクティブを登録し、Vue.filter() メソッドを使用してグローバル フィルターを登録し、Vue.component() メソッドを使用してグローバル ディレクティブを登録できます。コンポーネントなどたとえば、MyPlugin プラグイン オブジェクトの install() メソッドに my-component という名前のコンポーネントを登録しました。

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

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

次に、Vue.js アプリケーションで、Vue.js を次のように使用できます。コンポーネントは組み込みコンポーネントと同じです。

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

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

グローバル コンポーネントを登録する場合、コンポーネント名は小文字で始まる必要があり、テンプレート内の複数の単語を接続するにはダッシュを使用する必要があることに注意してください。

特定のページまたはコンポーネントでのみプラグイン機能を使用したい場合は、ページまたはコンポーネントでローカルにプラグインを登録することもできます。

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

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

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

ここでは、次のように使用します。 ES6 インポート この構文では、MyPlugin プラグイン オブジェクトを導入し、そのオブジェクトをローカル コンポーネントで使用する必要があるコンポーネント オブジェクトとして登録します。

3. プラグインの使用例

次に、Vue.js カスタム プラグインを開発に使用する例を見てみましょう。アプリケーションが非同期操作を実行するときに自動的に表示/非表示を切り替えるグローバル読み込みインジケーターを開発する必要があるとします。この関数を実装するには、LoadingIndicator という名前のプラグインを作成します。

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;

LoadingIndicator プラグイン オブジェクトの install() メソッドで、最初に Vue インスタンスをインジケーターのテンプレートとして定義します。その後、Vue インスタンスを body 要素にマウントし、インジケーターの表示と非表示をグローバルに制御する $loading グローバル API を定義しました。同時に、すべてのコンポーネントが $loading API にアクセスできるように、Vue.mixin() メソッドでグローバル ミックスインを定義しました。

これで、グローバルに使用できる LoadingIndicator プラグインを作成しました。 Vue.js アプリケーションでプラグインを使用するのは非常に簡単です。

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

Vue.use(LoadingIndicator);

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

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

ここでは、まず Vue.use() メソッドを使用して LoadingIndicator プラグインを Vue.js アプリケーションにインストールします。次に、非同期操作を必要とするコード ブロック内で this.$loading.show() メソッドを呼び出して読み込みインジケーターを表示し、次に this.$loading.hide() メソッドを呼び出して非同期操作の完了後に読み込みインジケーターを非表示にします。 . .

概要

Vue.js プラグインは、Vue.js フレームワークの機能を簡単に拡張できる強力な機能です。 Vue.js 3.0 のリリースにより、プラグインの開発と使用がより便利かつ柔軟になりました。この記事では、Vue.use() メソッドを使用してプラグインをインストールする方法、グローバル ディレクティブ、フィルター、コンポーネントを登録する方法、ページまたはコンポーネントでローカルにプラグインを使用する方法を紹介しました。最後に、グローバル ローディング インジケーター プラグインの例も使用して、Vue.js プラグイン開発の実際のアプリケーションを示しました。

以上がVUE3 開発の基本: Vue.js カスタム プラグインを使用した開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。