Vue.js 플러그인 사용하기 (install, use 메소드)

앞서 Vue 객체의 prototype으로 인스턴스 메소드를 추가하는 방법을 기재하였다!

 

https://pro-jm.tistory.com/89?category=1064702 

main.js 공통함수 전역 선언하기

 

전역설정을 할때 글로벌메소드 install과 use에 대해 찾아보다가 발견한 플러그인에 대해 적어보려 한다.

 

 

 

플러그인(plugin) 이란?

plugin은 전역 수준의 기능을 Vue에 추가하는 문법으로 소개된다.

실제로 현업에서 플러그인 기능을 사용하면서 불필요한 stroe사용을 줄일 수 있었다.

 

여러 문서를 살펴보면 다음과 같은 다양한 유형이 소개된다.

---

1. 약간의 전역 속성 혹은 메서드 추가 (vue-custom-element, HTML 태그를 커스텀하는 플러그인)
2. 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등 (vue-router, 라우팅 기능)
3. 글로벌 mixin으로 일부 컴포넌트 옵션 추가 (vuex, 전역상태)
4. Vue.prototype 에 Vue 인스턴스 메서드를 연결하여 Vue 인스턴스 메서드 추가 (추가 메서드)
5. API를 제공함과 동시에 일부 조합을 주입하는 라이브러리 (vue-router)

---

 

 

 

1. 플러그인 기본 사용구조

Vue.use 라는 글로벌 메소드를 통해 플러그인을 호출한다.

Vue.use(MyPlugin)

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

Vue.use() 를 호출하면, 플러그인 내에 정의된 install() 메서드가 호출되는 방식이다.

그럼 install 메소드를 사용하여 플러그인을 생성해보도록 하자.

 

 

 

2. 플러그인 만들기

 

공통함수를 선언할 js파일을 생성한 후 install 메소드로 플러그인을 생성한다.

export default{
    install(Vue){
        Vue.prototype.$test = 'test!'
    }
}

 

 

 

3. 생성한 플러그인 전역으로 등록하기

main.js 파일에서 해당 공통함수 js파일을 임포트하여

use 메소드랄 사용하여 플러그인을 호출한다.

import Vue from 'vue'
import App from './App.vue'
import {router} from './routes/index.js'
import { store } from './store/index.js'
import TestPlugin from './plugins/TestPlugin.js' // 공통함수 파일 임포트

Vue.use(TestPlugin) // 플러그인 호출

new Vue({
	render: h => h(App),
    router,
    store,
}), $mount('#app')

 

 

이렇게 등록한 후

원하는 컴포넌트에서 this.$test 를 사용하면 앞서 선언한 'test!' 결과값을 리턴받을 수 있다.