외부 라이브러리 모듈화

외부 라이브러리 모듈화 순서

1. 외부 라이브러리 설치
2. 라이브러리를 컴포넌트화
3. 컴포넌트를 플러그인화

플러그인으로 제작시 이점

일반적으로 컴포넌트로 분할해서 등록할시 라이브러리를 일일이 컴포넌트 마다 불러오는 불필요한 로직과 코드가 생기게됨

plugins라는 폴더를 등록후 그 안에서 라이브러리리들을 넣고 관리하는것이 효율적

플러그인 작성

플러그인에서 install 메소드에 Vue 생성자를 첫번째 인수로 사용하여 호출해야함

// plugins/ChartPlugins.js
import Chart from 'chart.js'

export default {
  install(Vue) {
    Vue.prototype.$_Chart = Chart; 
    // 상위 객체인 프로토타입에 값을 넣어 모든 컴포넌트에서 접근가능하게 됨
    // `$_` vue.js 스타일 가이드에서 권고하는 플러그인 또는 함수의 접두사
  }
}

플러그인 사용

• Vue.use()
  - Vue.use를 사용한 라이브러리는 모두 뷰에서 제공하는 플러그인을 사용한 형태
  - 자동으로 동일한 플러그인을 두 번 이상 사용하는 것을 방지
  - 동일한 플러그인에서 여러 번 호출하면 플러그인이 한 번만 설치됨

// main.js
import ChartPlugin from '경로';

Vue.config.productionTip = false;

Vue.use(ChartPlugin); 

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