vue-awesome-swiper : Vue.js Typescript에서 사용 방법


화면에서 슬라이딩을 제공하는 라이브러리 vue-awesome-swiper 에 대한 포스팅입니다.

Vue.js에선 아래에 소개하는 기본 사용 방법을 활용해 바로 프로젝트에 적용할 수 있습니다. 하지만 타입스크립트가 적용된 프로젝트라면 shims-vue.d.ts 파일에 모듈 추가를 해줘야 합니다.


전체 소스 코드는 바로 아래에 있고 vue-awesome-swiper 관련 글은 그 아래에 링크로 남겨 두었습니다.


shims-vue.d.ts


declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue-awesome-swiper' {
  import Swiper, { SwiperOptions } from 'swiper';
  import Vue, { PluginObjectVueConstructor } from 'vue';

  interface VueAwesomeSwiper extends PluginObject<SwiperOptions> {
    SwiperSwiper;
    swiperVueConstructor<Vue>;
    swiperSlideVueConstructor<Vue>;
  }

  const VueAwesomeSwiperVueAwesomeSwiper;
  export default VueAwesomeSwiper;
  export const swiperany;
  export const swiperSlideVueConstructor<Vue>;

  export { default as Swiper } from 'swiper';
}

여기까지 vue-awesome-swiper를 Vue.js + Typescript에서 사용 방법에 대해서 알려드렸는데요. 그래도 잘 모르시겠다면 질문 내용을 댓글로 남겨주세요. 아는 범위 내에선 최대한 자세히 알려드릴게요.




댓글(0)

Designed by JB FACTORY