カスタムプラグインVUE

1、エフェクトプラグイン

グローバル・ウィジェットは、通常のVueに機能を追加し、グローバルな方法は、典型的には、グローバル/命令/フィルタを追加します
Vueのプラグインでは、公共の方法は、インストールのVueをインストールするためのグローバルな方法で機能を追加しています
プラグインのグローバルメソッドVue.use（）を使用することで、それはあなたが新しいVueのは（）アプリケーションを起動するために呼び出す前に行う必要があります。

2、開発及び使用プラグイン

プロジェクトディレクトリにplugins.jsファイルを作成し、プラグインの内容を書き込むために使用

（関数（）{ 

  MyPluginはCONST = {} //プラグインオブジェクトを宣言
 
  MyPlugin.install = 関数（ヴュ、オプション）{
     // 1.グローバルメソッドまたはプロパティを追加 
    Vue.myGlobalMethod = 関数（）{ 
      アラート（「グローバルメソッドを追加または属性" ）
    } 

    // 2.グローバルリソースを追加 
    Vue.directive（ 'マイ・指令' 、{ 
      挿入：機能（EL、バインディング）{ 
        el.innerHTML = binding.value 
      } 
    }）

    // 3.噴射アセンブリオプション
    のVue .mixin（{ 
      作成：関数（）{
         // ロジック... 
      } 
    }）

    // 4インスタンスメソッド、参照を転送することができる追加 
    Vue.prototype。MyMethodは$ = 関数（）{ 
      アラート（ '追加する方法の例を' ）
    } 

  } 
  // にウィジェットを追加しますウィンドウオブジェクト 
  window.MyPlugin = MyPlugin 

}）（）

導入し、使用することのindex.html：

インポートドキュメント

<スクリプトSRC = "./ plugins.js"> </ SCRIPT>

グローバル方法 Vue.use() プラグインを使用して

Vue.use（MyPlugin）

使用

<！DOCTYPE HTML> 
<HTML LANG = "EN"のxmlns：V-上= "http://www.w3.org/1999/xhtml"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 
の<divのid = "アプリ"> 
    <ボタンV-私のディレクティブ= "MSG"> </ button>の<！ -使用指令- > 
</ div> 

<スクリプトSRC = "./ node_modules / VUE / DIST / vue.js "> </ SCRIPT> 
<スクリプトSRC =" ./ plugins.js"> </ SCRIPT> 

<SCRIPT> 

  Vue.use（MyPlugin）

  するvar VM = 新しいですヴュー（
    { 
      エル： '#app' 、
      データ：{ 
        MSG： 'こんにちは' 
      }、
      // 対象の方法で定義された`methods` 
       のメソッド：{
      }
    } 
  ）
  // 定義されたグローバルメソッドからの呼び出し、Vueのが呼び出す
  Vue.myGlobalMethodを（）
   // Vueのインスタンスメソッドを呼び出し、VMインスタンスが呼び出す
  VMを。$ザ・MyMethodは（）

 </ SCRIPT> 

</ BODY> 
</ HTML>

図3に示すように、プラグインのaxios

リクエストを送信するためのaxios、プロジェクトに導入する必要がある場合が多いプラグを使用することができる、プラグがグローバル行われ、この必要性は、すべてのページに導入されていません

プロジェクトディレクトリに対応したプラグインファイルを確立します

書き込みに対応する方法の例

'axios'からインポートaxios 

CONST MyHttpServer = {} 

MyHttpServer.install =（ヴュ）=> { 

  axios.defaults.baseURL = 'http://127.0.0.1:8000/api/' // 添加实例方法 
  Vue.prototype。 $ HTTP = axios 
} 
輸出デフォルト MyHttpServer

グローバルインポートmain.js

'@ /プラグイン/ HTTP'からインポートMyHttpServer 

Vue.use（MyHttpServer）

どこで使用することができます必要

 この。$ http.post（ 'アドユーザー'、データ）

おすすめ