vueカスタムプラグイン

公式サイト
公式サイト
プラグインの開発
プラグインは通常、Vueにグローバル機能を追加します.プラグインの範囲には制限はありません.一般的には、vue-custom-elementがグローバルリソースを追加する:コマンド/フィルタ/遷移など、グローバルmixinメソッドでvue-routerがVueインスタンスメソッドを追加するなど、コンポーネントオプションをグローバルmixinメソッドで追加します.prototypeで実現します.ライブラリは、独自のAPIを提供するとともに、vue-router Vueなどの上述の1つ以上の機能を提供する.jsのプラグインには公開方法installがあるはずです.このメソッドの最初のパラメータはVueコンストラクタで、2番目のパラメータはオプションのオプションオブジェクトです.

MyPlugin.install = function (Vue, options) {
  // 1.          
  Vue.myGlobalMethod = function () {
    //   ...
  }

  // 2.       
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      //   ...
    }
    ...
  })

  // 3.     
  Vue.mixin({
    created: function () {
      //   ...
    }
    ...
  })

  // 4.       
  Vue.prototype.$myMethod = function (methodOptions) {
    //   ...
  }
}

プラグインの使用
グローバルメソッドVueにより.use()はプラグイン://MyPlugin.install(Vue) Vueを呼び出す.use(MyPlugin)は、Vueというオプションオブジェクトを送信することもできる.use(MyPlugin, { someOption: true }) Vue.useは、同じプラグインの複数回の登録を自動的に阻止し、そのプラグインは1回しか登録されません.Vue.jsが公式に提供するプラグイン(例えばvue-router)は、Vueがアクセス可能なグローバル変数であることを検出すると自動的にVueを呼び出す.use().しかし、例えばCommonJSのモジュール環境では、常にVueを明示的に呼び出すべきである.use()//Browserifyまたはwebpackで提供されるCommonJSモジュール環境の場合var Vue=require(‘vue’)var VueRouter=require(‘vue-router’)
//このメソッドVueを呼び出すのを忘れないでください.use(VueRouter)awesome-vueは、コミュニティから貢献した数千のプラグインとライブラリを集めています.
公式サイトのチュートリアルに基づいて自分で例を書きます
新規作成vueのページaa.vue

export default {
  name: 'aa'
}

そしてこれをaa.vueはプラグインを作りますが、どうすればいいですか?もう一つ建てるjs、次は公式サイトに基づいて書き換えられ、Vue.component('Loading', loading)と追加されました.

import loading from './aa'
const MyPlugin = {
  install: function (Vue, options) {
    Vue.component('Loading', loading)
    // 1.          
    Vue.myGlobalMethod = function () {
      console.log('ddddddd')
      //   ...
    }

    // 2.       
    Vue.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
       el.style.backgroundColor = binding.value
        //   ...
      }
    })

    // 3.     
    Vue.mixin({
      created: function () {
        //   ...
      }
    })

    // 4.       
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('ccccccccc')
      //   ...
    }
  }
}

export default MyPlugin

プラグインができました.簡単です.次に、mainにおいて、上記のいくつかの方法Vue.component('Loading', loading)によってカスタムコンポーネントを定義する.jsが適用されると、このコンポーネントVue.myGlobalMethodをどこでも適用してVueのグローバルな方法を定義することができ、後でコードを出してどのように使うかを説明します.Vue.directive('my-directive',カスタムコマンドを定義します.後に簡単な例があります.公式サイトVue.mixin({が混入しているのを見ることができます.これは多くありませんが、アプリケーションでは多くありません.公式サイトアドレスVue.prototype.$myMethodのカスタマイズの実例方法は、.vueではthisを利用する.myMethod呼び出し.
コンポーネントの適用
修正main.jsは、まず、カスタムプラグインimport my from '../test/vueinstall'を導入する、その後、Vueを利用する.useアプリケーションプラグインVue.use(my)修正後は以下の通り

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import my from '../test/vueinstall'

Vue.config.productionTip = false
Vue.use(my)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

新規作成vueファイル、vueファイルにプラグインを適用します.

import Vue from 'vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      messages: 'red'
    }
  },
  mounted () {
    Vue.myGlobalMethod()//vue       
    this.$myMethod()//      
  },
  methods: {
  }
}

これがカスタムプラグインの使用です.element-uiなど、他のプラグインも使用されています.

import Element from 'element-ui'
Vue.use(Element)

これでelementのコンポーネントをグローバルに使用できます.