如何将leaflet.js连接到Vue.js

import L from 'leaflet';

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      }).addTo(map);
    },
  },
};
</script>

<style>
#map {
  height: 400px;
}
</style>

<template>
  <div>
    <h1>Leaflet Map</h1>
    <leaflet-map></leaflet-map>
  </div>
</template>

<script>
import LeafletMap from './LeafletMap.vue';

export default {
  components: {
    LeafletMap,
  },
};
</script>