[Vue.JS] 플러그인

플러그인은 일반적으로 전역으로 기능을 Vue에 추가합니다. 플러그인은 엄격하게 규정된 범위는 없으며, 여러 유형의 플러그인이 있습니다.

1. 일부 전역 메소드또는 속성 추가 : vue-coustom-element
2. 하나 이상의 전역 자산 추가 : 디렉티브 / 필터 / 트랜지션 등.. vue-touch
3. 글로벌 mixin으로 일부 컴포넌트 옵션을 추가 : vue-router
4. 일부 Vue 인스턴스 메소드를 Vue.prototype에 추가
5. 자체 API를 제공하는 동시에 위의 일부 조합을 주입하는 라이브러리 : vue-router

1. 플러그인 사용하기

Vue.use() 전역 메소드를 호출하여 플러그인을 사용할 수 있습니다.

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

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

위의 코드와 같이 new Vue()를 호출하여 앱을 시작하기 전에 Vue.use()를 사용해야 합니다.

Vue.use(MyPlugin, { someOption: true })

위의 코드와 같이 선택적으로 옵션을 전달 할 수 있습니다. Vue.use는 자동으로 같은 플로그인을 두 번 이상 사용하지 못하게 합니다. 동일한 플로그인을 여러번 호출하면 해당 플로그인은 한 번만 설치 됩니다.

// Browserify 또는 Webpack을 통해 CommonJS를 사용할 때
var Vue = require('vue')
var VueRouter = require('vue-router')

// 잊지 마세요
Vue.use(VueRouter)

vue-router와 같이 Vue.JS에서 공식적으로 제공하는 플러그인은 Vue가 전역으로 선언되어 있다면, 자동으로 Vue.use()를 호출합니다. 하지만 Common.JS와 같이 모듈러를 사용할 경우 항상 Vue.use()를 선언하여 사용해야 합니다.

2. 플로그인 작성하기

Vue.JS 플로그인은 install 메소드를 노출해야 합니다. install 함수는 전달인자로 첫번째 전달인자는 Vue 생성자, 두번째 전달인자로 옵션을 가집니다.

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 (options) {
    // 필요한 로직 ...
  }
}

참고

• https://kr.vuejs.org/v2/guide/plugins.html
• https://vuejs.org/v2/guide/plugins.html