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

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

序章

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

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

前提条件

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

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

このチュートリアルは、Nodev16.5.0で検証されました。 npm v6.14.8、および vue v2.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プラグインは、 install 2つのパラメーターを受け取るメソッド：

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

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

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

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)
});

あなたは不思議に思うかもしれません、なぜ私は電話することによってこれをすることができなかったのですか？ Vue.mixin() の main.js? その理由は、アプリを直接変更しないグローバル機能を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インスタンスの変更

インジェクションメカニズムを使用せずにプロパティまたはメソッドをコンポーネントインスタンスに直接追加するには、 Vue prototype ここに示すように：

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

13036