Vuejs 2.0 single component, web component, memory card and leaflet

I am using vuejs for a couple of weeks.

Right now, I am trying to implement leaflet maps. So I went to leaflet official site, and there they say I need to prepare my page:

  • Include Leaflet CSS file in the head
    section of your document
  • Include Leaflet JavaScript file
  • Put a div element with a certain id where you want your map to be
  • Make sure the map container has a defined height, for example by setting it in CSS.

The problem is that I do not have
< head
> section in my document because I use single file components like here:

#mymap {height: 180px;}

Where should I include this CSS file then?

Use @import
in your style section to import the CSS.

    @import "path/to/leaflet/dist/leaflet.css"

    #mymap {height: 180px;}

For the script, import the script.

     import Leaflet from 'leaflet'

     ...your code

FWIW, there is an HTML somewhere in your process and you can just add it there. Typically it’s index.html or something similar.

Secondly I wouldn’t import the CSS into the leaflet component you are trying to create; I would import it into your root component to prevent possibly importing the same CSS more than once. The library I linked in the comment takes this approach in their example application

Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Vuejs 2&period;0 single component&comma; web component&comma; memory card and leaflet

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录