플러그인

플러그인은 일반적으로 전역 수준의 기능을 Vue 에 추가합니다.

 

플러그인에는 엄격하게 정의된 범위는 없습니다.

 

일반적으로 작성할 수 있는  플러그인에는 여러 유형  이 있습니다.

 

1.  약간의 전역 메소드 또는 속성 추가
   1.  vue-custom-element
2. 하나 이상의 글로벌 에셋 추가
   1. 디렉티브 / 필터 / 트렌지션 등 vue-router
3. 글로벌 mixin으로 일부 컴포넌트를 추가
   1. vuex
4. Vue.prototype 에 Vue 인스턴스 메소드를 연결하여 Vue 인스턴스 메소드를 추가하십시요
5. 가지고 있는 API를 제공하면서 동시에 위의 일부 조합을 주입하는 라이브러리
   1. vue-router

---

 

플러그인 사용하기

Vue.use()  글로벌 메소드를 호출하여 플러그인을 사용

// 'MyPlugin.install(Vue)' 호출
Vue.use(MyPlugin)

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

 

선택적으로 몇가지 옵션을 전달할 수 있는데 

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

 

Vue.use 는 자동으로 같은 플러그인을 두 번 이상 사용하지 못하기 때문에 같은 플러그인에서 여러번 호출하면 플러그인이 한 번만 설치가 됩니다.

 

vue-router와 같은 Vue.js 공식 플러그인이 제공하는 일부 플러그인은 Vue 가 전역변수로 사용 가능한 경우 자동으로 Vue.use()  를 호출 합니다.
그러나 CommonJS 와 같은 모듈환경에서는 항상 Vue.use 를 명시적으로 호출해야 합니다.

 

 

// Browserify 또는 Webpack 를 통해 CommonJS 를 사용할 때

var Vue = require('vue')
var VueRouter = require('vue-router')


// 잊지 말기

Vue.use(VueRouter)

 

---

플러그인 작성하기

Vue.js 플러그인은 intall 메소드를 노출해야 합니다.

이 메소드는 첫번 째 인자로 Vue 생성자와 함께 가능한 옵션과 함께 호출될 것입니다.

 

MyPlugin.install = function (Vue, options){


	// 1. 전역 메소드 또는 속성 추가
    Vue.myGlobalMethod = function (){
    	// 필요한 로직
    }
    
    
    // 2. 전역 에셋 추가
    Vue.ditrctive( 'my-directive'{
    
    	blnd( el, bindingm vnode, oldVnode ){
        	// 필요한 로직
        }
    })
    
    
    // 3. 컴포넌트 옵션 주입
    Vue.mixin({
    	
        created : function (){
        	// 필요한 로직
        }
        
        . . .
    })
    
    
    // 4. 인스턴스 메소드 추가
    Vue.prototype.$myMethod = function ( methodOptions ){
    	// 필요한 로직
    }
}