外部库在.html文件中工作正常，但在quasar项目中则不行_Html_Vue.js_Leaflet_React Leaflet_Quasar Framework

外部库在.html文件中工作正常，但在quasar项目中则不行

html vue.js leaflet

外部库在.html文件中工作正常，但在quasar项目中则不行,html,vue.js,leaflet,react-leaflet,quasar-framework,Html,Vue.js,Leaflet,React Leaflet,Quasar Framework,我正在尝试将.html文件中的代码移动到Quasar项目中。当我运行我的.html文件时，代码运行得非常好，但是我收到来自Quasar的错误。以下是index.html文件中的初始代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Neshan Map Example (Leaflet)</title>

我正在尝试将.html文件中的代码移动到Quasar项目中。当我运行我的.html文件时，代码运行得非常好，但是我收到来自Quasar的错误。以下是index.html文件中的初始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neshan Map Example (Leaflet)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
</head>
<body>

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>

<script type="text/javascript">
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>
</body>
</html>


聂山地图示例（单张）
var myMap=新的L.Map（'Map'{
密钥：“myKey”，
地图类型：“梦幻”，
是的，
交通：错，
中间：[36.320378,59.571256]，
缩放：14
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png？{foo}'，{foo:'bar'，attributes:'Map data©；contributors'，}）.addTo（myMap）；
var marker=L.marker（[36.320378,59.571256]）.addTo（myMap）；
var popup=marker.bindpoppup（'helloworld！
我是一个弹出窗口'）；
openPopup（）；

以下代码是my index.vue：

<template>
  <q-page class="flex flex-center">
    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
    <div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;">></div>
  </q-page>
</template>

<script type="text/javascript">
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>


>
var myMap=新的L.Map（'Map'{
密钥：“myKey”，
地图类型：“梦幻”，
是的，
交通：错，
中间：[36.320378,59.571256]，
缩放：14
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png？{foo}'，{foo:'bar'，attributes:'Map data©；contributors'，}）.addTo（myMap）；
var marker=L.marker（[36.320378,59.571256]）.addTo（myMap）；
var popup=marker.bindpoppup（'helloworld！
我是一个弹出窗口'）；
openPopup（）；

我从浏览器收到此错误：

模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如

，因为它们不会被解析

我也试过：

<template>
  <q-page class="flex flex-center">
    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;">></div>
  </q-page>
</template>

<script type="text/javascript">
    import * as Vue2Leaflet from 'vue2-leaflet'
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>


>
从“vue2传单”导入*作为vue2传单
var myMap=新的L.Map（'Map'{
密钥：“myKey”，
地图类型：“梦幻”，
是的，
交通：错，
中间：[36.320378,59.571256]，
缩放：14
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png？{foo}'，{foo:'bar'，attributes:'Map data©；contributors'，}）.addTo（myMap）；
var marker=L.marker（[36.320378,59.571256]）.addTo（myMap）；
var popup=marker.bindpoppup（'helloworld！
我是一个弹出窗口'）；
openPopup（）；

即使我没有从上面的代码中得到任何错误，地图也不会显示在浏览器中。我做错了什么？

不是Quasar，是Vue本身删除了带有副作用的标签（Quasar是建立在Vue.js之上的框架）

另外，您正在导入Vue2Floate，它将传单库作为依赖项，但仍然使用来自cdn的js和css文件，而不是Vue2Floate库

我的建议是：

在项目中运行

npm安装传单

（如果package.json中没有列出传单）

从package.json和import语句中完全删除Vue2slaple，因为Vue2slaple只是传单库的包装

删除模板标记内的链接和脚本标记

在模板标记之外，在脚本标记中，执行以下操作：

我能够用这些更改渲染地图，没有错误，但看起来很混乱

最后一步是将

添加到项目的

src

文件夹中的index.template.html文件中

我使用的是quasar版本1.4.5

请记住，使用Quasar Framework，您已经进入了Vue.js的世界，在这里，工作方式与普通HTML和js文件不同。请在各自的主页上阅读这两方面的文档。和。如果您需要入门帮助，Vue主页（学习菜单下）上列出了一些不错的课程

我希望这有帮助

import L from 'leaflet'

export default {
  mounted () {
   // move your code here
  }
}