Vue 2.6+Leaflet1.6（一）：环境搭建，hello word起步

一、环境搭建

1.1 安装leaflet

npm install  leaflet --save

1.2 引入leaflet

在main.js中设置如下：

//引入样式文件
import 'leaflet/dist/leaflet.css'

//引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet' 
Vue.L = Vue.prototype.$L = L  

二、使用

vue文件中：

<template>
  <div class="leaflet_container" id="map">
  </div>
</template>
<script>
export default {
    name:'LeafletTest',
      data () {
        return {}
      },
    mounted(){
        this.init();
    },
    methods: {
       init(){
           var map = L.map('map').setView([51.505, -0.09], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();
        }, 
    },
}
</script>
<style type="text/css" scoped>
.leaflet_container{
    width: 100%;
    height: 100%;
}
</style>