在原生 html 中使用 vue，在瀏覽器中直接運行 .vue 文件，在 vue 中使用 leaflet

vue3-in-html

在html中使用vue3，不依賴nodejs和webpack，不依賴腳手架

demo源碼

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

功能

1. 編寫了幾個簡單的組件，使用了element-plus和vuex
2. 在vue3組件中使用leaflet實現電子地圖

特色

1. 原生 html 開發，不依賴 nodejs 和 webpack，不依賴腳手架
2. 支持在瀏覽器中直接運行.vue擴展名的組件文件
3. style 支持 scoped
4. 集成了 leaflet 實現電子地圖
5. vue 和 jqeury 混合使用，方便以較小的修改量引入舊代碼

代碼分支

1. master 分支

主分支，該分支采用異步的方式加載vue文件

2. sync 分支

該分支采用同步的方式加載vue文件，文件較多時存在性能問題

說明

1. 組件style支持scoped，但實現原理和vue的scoped不同，缺陷是父組件中的樣式可能會應用到子組件中具有相同class的標簽上，
   出現這種情況時要為子組件受影響的css屬性在class中設置一下該屬性的值

2. 支持.vue擴展名的文件，從而使編寫的vue模板代碼在vscode中具有語法檢查

3. 谷歌瀏覽器可以打開，火狐瀏覽器未測試，不支持IE瀏覽器

4. 電子地圖代碼是我從 https://gitee.com/s0611163/leaflet-demo 復制過來的，代碼本身與vue沒有瓜葛，額外寫了一個組件MapPage用來引入電子地圖功能，
   使用這種方式不需要把地圖相關代碼直接寫在vue的組件中

關於 controlButtons.js 和 switchMapControl.js

這兩個電子地圖相關的組件並沒有使用 Vue.defineComponent 定義，而是使用 Vue.createApp 的方式定義的，是為了測試不同的實現方式；
controlButtons 直接使用 jquery 實現，並混合了 vue；

思考

1. 為了解決vue文件加載性能問題，采用了異步函數，由於 async await 的傳染性，導致使用defineComponent定義組件時，template必須異步獲取，
   導致無法通過import導入定義的組件，必須定義異步函數創建組件，使用defineComponent定義父組件時，子組件必須異步獲取

2. async await 的使用，使得代碼簡捷清晰，優雅地實現了vue文件的並行請求

注意

1. 對 iclient-leaflet.js 的引用要放在 proj4leaflet.js 的前面，否則 iclient-leaflet.js 會重寫 proj4leaflet.js 中的 L.CRS 的 scale 方法，
   從而使百度地圖無法正確加載瓦片；當使用 leaflet 加載百度地圖，引用了 iclient-leaflet.js 並且圖源不是超圖提供時，可能會引發此問題

代碼結構

demo效果圖