vue3-in-html
在html中使用vue3，不依賴nodejs和webpack，不依賴腳手架
demo原始碼
https://gitee.com/s0611163/vue3-in-html
功能
- 撰寫了幾個簡單的組件，使用了element-plus和vuex
- 在vue3組件中使用leaflet實作電子地圖
特色
- 原生 html 開發，不依賴 nodejs 和 webpack，不依賴腳手架
- 支持在瀏覽器中直接運行.vue擴展名的組件檔案
- style 支持 scoped
- 集成了 leaflet 實作電子地圖
代碼分支
- master 分支：主分支
- async 分支：異步實作分支
說明
- 組件style支持scoped，但實作原理和vue的scoped不同，缺陷是父組件中的樣式可能會應用到子組件中具有相同class的標簽上，
出現這種情況時要為子組件受影響的css屬性在class中設定一下該屬性的值 - 支持.vue擴展名的檔案，從而使撰寫的vue模板代碼在vscode中具有語法檢查
- 谷歌瀏覽器可以打開，火狐瀏覽器未測驗，不支持IE瀏覽器
- 電子地圖代碼是我從 https://gitee.com/s0611163/leaflet-demo 復制過來的，代碼本身與vue沒有瓜葛，額外寫了一個組件MapPage用來引入電子地圖功能，
使用這種方式不需要把地圖相關代碼直接寫在vue的組件中
關于 controlButtons.js 和 switchMapControl.js
這兩個電子地圖相關的組件并沒有使用 Vue.defineComponent 定義，而是使用 Vue.createApp 的方式定義的，是為了測驗不同的實作方式；
controlButtons 直接使用 jquery 實作，并混合了 vue；
注意
- 對 iclient-leaflet.js 的參考要放在 proj4leaflet.js 的前面，否則 iclient-leaflet.js 會重寫 proj4leaflet.js 中的 L.CRS 的 scale 方法，
從而使百度地圖無法正確加載瓦片；當使用 leaflet 加載百度地圖，參考了 iclient-leaflet.js 并且圖源不是超圖提供時，可能會引發此問題
代碼結構
demo效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/384086.html
標籤：其他
上一篇：SAP RETAIL 分配規則里的哪些資料不會被帶入分配表？
下一篇：Vue相關開源專案庫集合