###### tags: `Vue`

# Vue - 建立自己的插件

插件通常用來為Vue添加全域功能。

## Vue 如何使用插件

通過全域方法Vue.use()使用插件。它需要在你呼叫new Vue()啟動應用之前完成：

import Vue from 'Vue'
import SomePlugin from 'SomePlugin'

// calls `SomePlugin.install(Vue)`
Vue.use(SomePlugin)

new Vue({
  //... options
})

也可以傳入一個可選的選項物件：

Vue.use(SomePlugin, SomeOptions)

Vue.use會自動阻止多次註冊相同插件，屆時即使多次呼叫也只會註冊一次該插件。

## Vue 如何建立插件

Vue.js的插件應該暴露一個install方法。這個方法的第一個參數是Vue構造器，第二個參數是一個可選的選項物件：

SomePlugin.install = function (Vue, options) {

    // 註冊全域組件...
    Vue.component('SomeComponet',SomeComponet)
    
    // 註冊全域Mixin
    Vue.mixin({
        ....
    })

    // 註冊全域diretive
    Vue.directive('someEvent',{
        ....
    })
    
    // 註冊全域Filter 
    Vue.filter('filterName',function(value){})

    // 替Vue實例增加屬性
    Vue.prototype.$something = doSomething()
    
}

export SomePlugin

## 參考連結

* [Vue - Plugin](https://vuejs.org/v2/guide/plugins.html)
* [Writing a very simple plugin in Vue.js - (Example)](https://dev.to/nkoik/writing-a-very-simple-plugin-in-vuejs---example-8g8)
* [Creating Custom Vue.js Plugins](https://alligator.io/vuejs/creating-custom-plugins/)