Vue를 사용하여 이미지 갤러리를 구현하는 방법은 무엇입니까?

<template>
  <div class="gallery">
    <div class="grid">
      <div class="grid-item" v-for="(item, index) in items" :key="index" @click="openGallery(index)">
        <img :src="item.thumbnailUrl">
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
import adapter from './vue-photoswipe'

Vue.use(adapter)

export default {
  name: 'Gallery',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      pswpOptions: {
        //Photoswipe的配置项
      }
    }
  },
  methods: {
    openGallery (index) {
      const pswpElement = document.querySelectorAll('.pswp')[0]
      const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, this.items, this.pswpOptions)
      gallery.init()
      gallery.goTo(index)
    }
  }
}
</script>

<style scoped>
.gallery {
  margin: 20px auto;
  width: 80%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 20px;
}

.grid-item {
  cursor: pointer;
}

.grid-item img {
  width: 100%;
  height: auto;
}
</style>

<template>
  <div id="app">
    <Gallery :items="items"></Gallery>
  </div>
</template>

<script>
import Gallery from './components/Gallery'

export default {
  name: 'App',
  components: {
    Gallery
  },
  data () {
    return {
      items: [
        {
          src: 'image1-src.jpg',
          w: 1200,
          h: 800,
          title: 'Image1'
        },
        {
          src: 'image2-src.jpg',
          w: 1200,
          h: 800,
          title: 'Image2'
        }
      ]
    }
  }
}
</script>