直接通过<script src=.>导入使用Vue2leaflet

Question

我是JavaScript的新手，我试图为我用Python创建的部分网站添加一些现代的交互性。Vue在我看来很吸引人，我想使用而不使用节点/webpack等，这是我不熟悉的。

Vue网站对如何通过<script src=... >导入框架本身有相当全面的描述，但是我也想使用Vue2leaflet包。

我尝试用<script src=... >将其添加到网页中，然后在脚本中注册组件

Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component("l-circle", Vue2leaflet.LCircle)

我能够用瓷砖层渲染openStreetMaps，但是我不能将l-圆圈呈现到地图上。

下面是代码：https://jsfiddle.net/b2c1rzfa/14/

为什么这些圆圈没有被画出来(因为这两种方法都是尝试过的)？描述的Vue2leaflet组件导入和注册方法是否正确？

Answer 1

我在Vue论坛上收到了一个答复，把它贴在这里是为了别人的利益(谢谢小冲突)--修改后一切都很好，如下所述：

--这不是如何注册组件的问题。

主要问题是这一行：<l-tile-layer :url="ll.url"/>

您需要将其更改为：<l-tile-layer :url="ll.url"></l-tile-layer>

因为您使用的是DOM模板，所以浏览器将在Vue接近它之前将其解析为HTML。浏览器的解析器不支持使用尾随/>的自关闭标记。其结果是，在遗嘱后面的标签将被视为儿童而不是兄弟姐妹。

一旦修复了这个问题，就会得到一些验证错误，因为第二个循环缺少了一些:它的属性上的前缀。

然后你会得到一个错误，因为你没有注册l-弹出，但如果你放大，你会看到你的圆圈。