如何将 JS 库与 Vue3 项目集成？

Question

我正在尝试将 Leaflet 与 Vue 3 项目集成，但我需要一些帮助将纯 JS 库与 Vue 项目集成（不确定是否可以不使用专用 NPM 包）。根据 Leaflet 文档，我在我的 index.html 文件中包含了 .css 和 .js 文件，并且我已经完成了说明中描述的所有内容，但是每当我尝试在 Vue 上下文中重新创建他们的示例代码时我收到以下错误：

runtime-core.esm-bundler.js?5c40:540 Error: Map container not found.
    at NewClass._initContainer (leaflet-src.js?e11e:4066)
    at NewClass.initialize (leaflet-src.js?e11e:3099)
    at new NewClass (leaflet-src.js?e11e:296)
    at Object.createMap [as map] (leaflet-src.js?e11e:4691)
    at setup (VM2010 App.vue:14)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)

我的项目很简单。这是我的 index.html 文件：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script src="js/main.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

我已将 leaflet.js 文件包含在头部和正文部分以防万一...

这是我的 App.vue 文件：

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

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";

export default {
  name: "App",
  setup() {
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    return {
      mymap
    }
  }
};
</script>

<style>
#mapid { height: 180px; }
</style>

如果我的问题很愚蠢，我深表歉意。任何建议将不胜感激，因为我已经为该库尝试了多个包装器，并且它们都与 Vue 3 存在兼容性问题。

Answer 1

尝试在 onMounted 挂钩中将地图挂载到其容器中，因为在设置挂钩中 DOM 树尚未准备好：

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import {onMounted,ref} from 'vue'

export default {
  name: "App",
  setup() {
    var mymap =ref(null)

   onMounted(()=>{
     mymap.value=     L.map('mapid').setView([51.505, -0.09], 13);
   })
    return {
      mymap
    }
  }
};
</script

如何将 JS 库与 Vue3 项目集成？

How can I integrate a JS library with a Vue3 project?

leaflet

vue.js

vuejs3