提示：本文章大概800字，阅读需要四分钟；

第一部分，创建vue项目

首先新建一个Vue项目，并命名为leaflet01;

进入该项目，并试运行；

打开浏览器输入http://localhost:8080，出现如下网页则项目创建成功，接下来，就是正式进入leaflet的学习；

第二部分，leaflet加载地图

使用IDE打开项目文件，安装leaflet依赖；

在【src】文件夹下的main.js中添加引用；

import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
Vue.L = Vue.prototype.$L = L;

接下来在【src】-> 【components】中新建一个vue文件，并命名为mapContainer.vue;

<template>
 <div id="map"></div>
</template>
<script>
export default {
 name: 'mapContainer',
 data () {
 return {
 }
 }
}
</script>
<style scoped>
#map {
 height: 100%;
 width: 100%;
 padding: 0px;
 margin: 0px;
}
</style>

我们写一个方法来加载地图；

initMap () {
 var map = L.map('map').setView([30, 120], 13);
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 }

运行起来，看看效果；

为了创建一个干净的地图，我们可以设置一些参数，例如；

查看效果；

当然还有其他的参数可以学习，可以访问官方网址：https://leafletjs.com/；

谢谢；