vue プラグインをパッケージ化する方法

まずtoastフォルダにindex.jsファイルを作成し、jsファイルにオブジェクトを作成してエクスポートする

// index.js 
const toast = {}
デフォルトのトーストをエクスポート

このファイルを main.js にインポートして使用します

// main.js 
import toast from 'toast/index.js' 
Vue.use(toast)

オブジェクトの install メソッドを呼び出すために使用することがわかっているので、index.js に install メソッドを記述する必要があります。

// index.js 
const toast = {} 
toast.install = function() { 
    // console.log() ここで、自分で出力を作成して、それが呼び出されたかどうかを確認できます
} 
export default toast

出力を行った後、このメソッドが実際に呼び出されていることがわかるはずですが、この時点で、このインストールメソッドでいくつかのことを実行できます。

トーストコンポーネントを取得する

コンポーネントをページに追加する

コンポーネントの表示方法を vue インスタンスに渡す

ここで考え方を説明

コンポーネントを操作するには、まずコンポーネントを取得する必要があります。

次に、コンポーネントをページに追加する方法を見つけます。これにより、他のコンポーネントに導入する必要がなくなり、1 行のコードでページに小さなボックスを表示できます。

次に、直接 this.$toast.show() できるように、コンポーネントの表示方法を vue インスタンスのプロトタイプ属性に与える必要があります。

インストール用のコードを記述するには

toast.install = function (Vue) { 
    console.log('used') 
    // 1. コンポーネント コンストラクターを作成します
    const toastConstructor = Vue.extend(Toast) 
    // 2. コンポーネント コンストラクターを使用してコンポーネントを作成します
     const toast = new toastConstructor() 
    // 3. コンポーネントを要素に手動でマウントする
    toast.$mount(document.createElement('div')) 
    // 4. ページにノードを挿入します。$el は
    コンポーネントのノード ドキュメントです。 .appendChild(toast.$el) 
    // 5. コンポーネントを vue インスタンスに追加します
    Vue.prototype.$toast = toast 
}

ここでコードを説明するには：

install メソッドは、Vue のオブジェクトであるパラメーターを自動的に渡します。

コンポーネントはノードノードではなく仮想 DOM であるため、トーストをページに直接挿入することはできません。

そのため、コンポーネントを介して実際の dom を作成し、それをページにマウントする必要があります

手順は、extend を使用してコンポーネントコンストラクターを作成し、コンポーネントコンストラクターを使用してコンポーネントオブジェクトをインスタンス化し、コンポーネントオブジェクトを要素に手動でマウントしてから、ページに挿入します。

最後に、このコンポーネントのインスタンスを Vue.prototype.$toast に渡すと、他の場所で this.$toast を使用できます

vue プラグインをパッケージ化する方法

おすすめ