在 Vue 中使用 Leaflet - 张拓的天空

所属分类：Web前端

摘要

在html中使用vue3，在vue3中使用leafletdemo源码：https://gitee.com/s0611163/vue3-in-htmldemo效果图：

在html中使用vue3，在vue3中使用leaflet

demo源码：

https://gitee.com/s0611163/vue3-in-html

demo效果图：

在 Vue 中使用 Leaflet

# vue3-in-html

在html中使用vue3，不依赖nodejs和webpack，不依赖脚手架

## 功能

1. 编写了几个简单的组件，使用了element-plus和vuex

2. 在vue3组件中使用leaflet实现电子地图

## 说明

1. 组件style支持scoped，但实现原理和vue的scoped不同，缺陷是父组件中的样式可能会应用到子组件中具有相同class的标签上，

出现这种情况时要为子组件受影响的css属性在class中设置一下该属性的值

2. 支持.vue扩展名的文件，从而使编写的vue模板代码在vscode中具有语法检查

3. 谷歌浏览器可以打开，火狐浏览器未测试，不支持IE浏览器

4. 电子地图代码是我从 https://gitee.com/s0611163/leaflet-demo 复制过来的，代码本身与vue没有瓜葛，额外写了一个组件MapPage用来引入电子地图功能，

使用这种方式不需要把地图相关代码直接写在vue的组件中