vue 플러그인 생성

플러그인은 여러 컴포넌트에서 사용되는(특히 전역) 기능을 만들 때 사용한다.

 

Vue.use(Vuex);
Vue.use(VueRouter);

 

Vue.use(Vuex)를 호출하면, Vuex에 정의되어있는 install()이라는 메서드가 호출된다.

이 사실이 가장 간단하면서도 가장 중요하다.

 

첫 번째 방법 🛺

 

간단히 console.log를 찍는 플러그인을 하나 만들어보려고한다.

plugins안에 하나의 파일을 만들자.

 

plugins/gogosing.js

import Vue from 'vue'

export const GoGoSSing = {
  install (Vue) {
    Vue.prototype.$mygogo = () => {
      console.log('고고싱...')
    }
  }
}
Vue.use(GoGoSSing)

​

main.js

~~~
import gogosing from './plugins/gogosing.js'
~~~


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

 

이런식으로 Vue에 등록을 해주면 컴포넌트에서도 사용할 수 있다.

 

 

두 번째 방법 🛺

export가 아니라 export default로 해주어도된다.

 

 

plugins/gogosing.js

export default  {
  install (Vue) {
    Vue.prototype.$mygogo = () => {
      console.log('고고!!')
    }
  }
}

 

main.js

~~~
import gogosing from './plugins/gogosing.js'
~~~

Vue.use(gogosing)

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

첫 번째 방식과는 다르게 use를 사용해주었고 별도로 Vue안에 추가해주지 않았다.

 

세 번째 방법 🛺

 

plugins/gogosing.js

export const con = ()=>{
  console.log('이거도 되나?')
}

main.js

~~~
import { con } from './plugins/gogosing.js'
~~~

Vue.prototype.$gogosing = con

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

 

쓰고싶은 곳에서 this.$gogosing을 사용하면 된다.