Vueプラグインの書き方を説明する記事

プラグインとは

Vue フレームワークでは、Vue に必要な機能を追加する必要がある場合、Vue にはプラグイン メソッドが用意されています。独自のプラグインを作成し、そのプラグインを Vue に登録して使用することができます。

Vue プラグインを使用すると、Vue フレームワークにはない機能を実装したり、他の人が作成したプラグインを使用して機能をより迅速に実装したりできます。

プラグインの機能範囲には厳密な要件はありません。公式の例によると、一般的に次の種類があります。

1. vue-custom-elementなどのグローバル メソッドまたは属性を追加します。いくつかのグローバル コンポーネントをプラグインとして追加し、任意のページまたはコンポーネントで使用できます。これは、Element UI または Ant Design コンポーネント ライブラリがコンポーネントをインストールする方法でもあります。

2.グローバル リソースを追加します: 指示/遷移などたとえば、 vue-touch 、プラグインを使用してグローバルなカスタム命令を追加し、関数を実装することもできます。

3.グローバル ミックスインを使用していくつかのコンポーネント オプションを追加します。 ( vue-routerなど)

4. config.globalPropertiesに追加して、グローバル インスタンス メソッドを追加します。たとえば、$http リクエストをグローバル インスタンス メソッドに配置することがよくあります。これにより、明示的にインポートしなくても、任意のページまたはコンポーネントで使用できるようになります。

5.独自の API を提供し、上記の機能の 1 つ以上を提供するライブラリ。 vue-router 、 vuexなど。

プラグインの作成

Vue プラグインの作成は実はとても簡単です。プラグインは実際にはオブジェクトまたは関数です。オブジェクトの場合は、オブジェクト内の install メソッドが呼び出され、関数の場合はこの関数が呼び出されます。オブジェクトのインストール メソッドを呼び出す場合でも、関数を呼び出す場合でも、2 つのパラメーターを受け取ります。1 は Vue の createApp によって生成されたアプリ オブジェクトであり、2 はユーザーによって渡されたパラメーターです。

最も単純な i18n 関数から始めましょう。

通常、プラグインは保守と管理が容易なpluginsフォルダーに配置します。

i18n.jsファイルを作成します

エクスポートデフォルト{
  インストール: (アプリ、オプション) => {
    // プラグインコードを記述する}
}

たとえば、プログラム全体を翻訳するためのグローバル関数が必要な場合は、app.config.globalProperties プロパティにメソッドを設定して公開することができます。

この関数は、ユーザーが指定した引数オブジェクト内で変換された文字列を検索するために使用するキー文字列を受け取ります。

// プラグイン/i18n.js
エクスポートデフォルト{
  インストール: (アプリ、オプション) => {
    app.config.globalProperties.$translate = キー => {
      戻り値: key.split('.').reduce((o, i) => {
        if (o) o[i] を返す
      }、オプション)
    }
  }
}

プラグインを使用する場合、ユーザーはオプション パラメータで翻訳されたキーを含むオブジェクトを渡すものと想定されます。 $translate 関数は greetings.hello などの文字列を使用するため、検索される値は Bonjour! になります。

例えば：

ご挨拶:
  こんにちは：「ボンジュール！」
}

また、inject を使用して機能やプロパティを提供することもできます。たとえば、アプリケーションがオプション パラメータにアクセスできるようにして、プラグインのインストール時に渡されるパラメータ オブジェクトを使用できるようにすることができます。

// プラグイン/i18n.js
エクスポートデフォルト{
  インストール: (アプリ、オプション) => {
    app.config.globalProperties.$translate = キー => {
      戻り値: key.split('.').reduce((o, i) => {
        if (o) o[i] を返す
      }、オプション)
    }
    app.provide('i18n', オプション)
  }
}

これで、 inject[i18n]を使用して、オブジェクトにアクセスするためにいくつかのページまたはコンポーネントに挿入できるようになりました。

Vue はプラグインの最初の引数としてアプリ オブジェクトを提供するため、ミックスインやディレクティブの使用など、他のすべての機能をプラグインで利用できます。 createAppとアプリケーション インスタンスの詳細については、アプリケーション API ドキュメントをご覧ください。

たとえば、以下では、プラグインに新しいカスタム ディレクティブとグローバル ミックスイン メソッドを登録します。

// プラグイン/i18n.js
エクスポートデフォルト{
  インストール: (アプリ、オプション) => {
    app.config.globalProperties.$translate = (キー) => {
      key.split('.') を返します
        .reduce((o, i) => { if (o) return o[i] }, オプション)
    }
    app.provide('i18n', オプション)
    app.directive('my-directive', {
      マウント済み (el、バインディング、vnode、oldVnode) {
        // いくつかのロジック...
      }
      //...
    })
    app.mixin({
      作成された() {
        // いくつかのロジック...
      }
      //...
    })
  }
}

プラグインの使用

上記のプラグインを記述したら、プラグインを使用できるようになります。 Vue でプラグインを使用するのも非常に簡単です。use() メソッドを使用して、アプリケーションにプラグインを追加できます。

use()メソッドは 2 つのパラメータを取ります。最初はインストールするプラグインです。

2 番目のパラメータはオプションであり、プラグインにいくつかのカスタム パラメータを渡すことができます。

// メイン.js
'vue' から {createApp} をインポートします。
'./App.vue' からルートをインポートします。
'./plugins/i18n' から i18nPlugin をインポートします。
const app = createApp(ルート)
定数i18nStrings = {
  ご挨拶:
    こんにちは:「こんにちは！」
  }
}
app.use(i18nプラグイン、i18n文字列)
app.mount('#app')

最後に、このプラグインをページで使用します。

<テンプレート>
  <h1>{{ $translate("こんにちは") }}</h1>
  <div>i18n プラグインの例</div>
</テンプレート>

最終的な表示:

要約する

参考: https://v3.cn.vuejs.org/guide/plugins.html

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。