カスタムVue.jsプラグインを作成する方法
序章
Vue.jsプラグインは、アプリにグローバル機能を追加するための強力ですが簡単な方法です。 これらには、アプリ全体のコンポーネントの配布から、ルーティングや不変のデータストアなどの追加機能のアプリへの追加まで、さまざまな用途があります。
この記事では、Vueカスタムプラグインの例を作成します。
前提条件
この記事をフォローするには、次のものが必要です。
- Vue.jsプロジェクトの設定にある程度精通している。
このチュートリアルは、ノードv16.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プラグインは、次の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インスタンスの変更
インジェクションメカニズムを使用せずにプロパティまたはメソッドをコンポーネントインスタンスに直接追加するには、次のように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カスタムプラグインの例を作成しました。