カスタムVue.jsプラグインを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

Vue.jsプラグインは、アプリにグローバル機能を追加するための強力ですが簡単な方法です。アプリ全体のコンポーネントの配布から、ルーティングや不変のデータストアなどの追加機能のアプリへの追加まで、さまざまな用途があります。

この記事では、Vueカスタムプラグインの例を作成します。

前提条件

この記事をフォローするには、次のものが必要です。

Vue.jsプロジェクトの設定にある程度精通している。

このチュートリアルは、ノードv16.5.0、npm v6.14.8、およびvuev2.6.11で検証されました。

最初のプラグインの構築

Vueプラグインの世界の紹介として、コンポーネントがDOMにマウントされるたびにコンソールに書き込むプラグインを作成します。

my-vue-plugin.js

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

Vueプラグインは、次の2つのパラメーターを受け取るinstallメソッドを持つオブジェクトです。

グローバルVueオブジェクト
およびユーザー定義のoptionsを含むオブジェクト

Vue.mixin()は、すべてのコンポーネントに機能を注入するために使用されます。この場合、mounted()メソッドは、コンポーネントがDOMに追加されたときに実行されます。

プラグインをインポートしてVue.use(MyPlugin)を呼び出すことで、プラグインをVueアプリで使用できるようになりました。

main.js

import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

不思議に思うかもしれませんが、main.jsでVue.mixin()を呼び出すだけで、これを実行できないのはなぜですか。その理由は、アプリを直接変更しないグローバル機能をVueに追加しているため、ほとんどの場合、それを自由に追加または削除できる別のモジュールに分割するのが最善であるためです。また、プラグインの配布が非常に簡単になります。

機能の追加

コンポーネントのライフサイクルフックまたはプロパティの追加

上記の「最初のプラグイン」の例に示されているように、 Mixin を使用して、ライフサイクルフックを追加したり、Vueコンポーネントにその他の変更を加えたりすることができます。

注：ミックスインはかなり高度なトピックであり、この記事の範囲外です。今のところ、十分な説明は、それらが本質的に他のコンポーネントに結合される（「混合される」）コンポーネント定義であるということです。

my-vue-plugin.js

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

アプリ全体のコンポーネントとディレクティブのインストール

コンポーネントまたはディレクティブをプラグインとして配布するようにパッケージ化する場合は、次のように記述します。

my-vue-plugin.js

import MyComponent from './components/MyComponent.vue'
import MyDirective from './directives/MyDirective.js'

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.component(MyComponent.name, MyComponent)
    Vue.directive(MyDirective.name, MyDirective)
  }
};

export default MyPlugin;

グローバルVueオブジェクトの変更

プラグインからグローバルVueオブジェクトを変更できます。

my-vue-plugin.js

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

Vueインスタンスの変更

インジェクションメカニズムを使用せずにプロパティまたはメソッドをコンポーネントインスタンスに直接追加するには、次のようにVueprototypeを変更できます。

my-vue-plugin.js

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};

export default MyPlugin;

これらのプロパティは、すべてのコンポーネントとVueインスタンスに追加されます。

注： Vueコミュニティ内では、Vueプロトタイプを変更するプラグインは、追加されたプロパティの前にドル記号（$）を付けることが一般的に期待されています。

自動インストールのサポート

モジュールシステムの外部でプラグインを使用する場合、プラグインがVueスクリプトタグの後に含まれていると、Vue.use()を呼び出さなくてもプラグインが自動的にインストールされることがよくあります。これを実装するには、my-vue-plugin.jsの末尾に次の行を追加します。

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}

Vueがグローバルスコープに追加されている場合の自動インストール。

プラグインの配布

プラグインを作成したら、それをコミュニティに配布できます。プロセスにまだ慣れていない場合は、プラグインを見つけやすくするための一般的な手順を次に示します。

ソースコードと配布可能なファイルをnpmとGitHubに公開します。コードに適したライセンスを選択してください。
公式のVuecool-stuff-discoveryリポジトリへのプルリクエストを開きます：awesome-vue。多くの人がプラグインを探すためにここに来ます。
（オプション） Vueフォーラム、 Vue Gitter Channel 、およびTwitterにハッシュタグ#vuejsを付けて投稿してください。

プラグインを作ってください！

結論

この記事では、Vueカスタムプラグインの例を作成しました。

プラグインおよびMixinsのVueドキュメントで学習を続けてください。

getdocs

9427