可以参考官方文档：但是文档是HTML，需要自己进行转换

1、安装vuecli

npm install -g vue-cli 

2、创建项目

vue init webpack vue_leaflet

3、安装leaflet

npm install leaflet --save

4、安装 SuperMap iClient for Leaflet：（注：安装依赖时要进入其文件夹）

npm install @supermap/iclient-leaflet

5、将组件中的helloWorld.vue 改成mLeaflet,router也需要更改

6、在main.js引入css文件和js文件

import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'
import 'leaflet/dist/leaflet'

7、mLeaflet.vue页面创建一幅地图

引入L：

import L from 'leaflet'

我是通过一个函数来展示地图，然后mounted(){捕捉该函数}

页面全部代码：

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

<script>
import L from 'leaflet'

export default {
  name: 'mLeaflet',
  data () {
    return {}
  },
  methods: {
    addMap () {
      var m = L.map('map').setView([36.52, 120.31], 10)
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox</a>'
      }).addTo(m)
    }
  },
  mounted () {
    this.addMap()
  }
}
</script>
<style  scoped>
#map {
  width: 1567px;
  height: 750px;
}
</style>

页面效果