代码拉取完成，页面将自动刷新
在html中使用vue3，不依赖nodejs和webpack，不依赖脚手架
主分支，该分支采用异步的方式加载vue文件
该分支采用同步的方式加载vue文件，文件较多时存在性能问题
组件style支持scoped，但实现原理和vue的scoped不同，缺陷是父组件中的样式可能会应用到子组件中具有相同class的标签上， 出现这种情况时要为子组件受影响的css属性在class中设置一下该属性的值
支持.vue扩展名的文件，从而使编写的vue模板代码在vscode中具有语法检查
谷歌浏览器可以打开，火狐浏览器未测试，不支持IE浏览器
电子地图代码是我从 https://gitee.com/s0611163/leaflet-demo 复制过来的，代码本身与vue没有瓜葛，额外写了一个组件MapPage用来引入电子地图功能， 使用这种方式不需要把地图相关代码直接写在vue的组件中
这两个电子地图相关的组件并没有使用 Vue.defineComponent 定义，而是使用 Vue.createApp 的方式定义的，是为了测试不同的实现方式；
controlButtons 直接使用 jquery 实现，并混合了 vue；
为了解决vue文件加载性能问题，采用了异步函数，由于 async await 的传染性，导致使用defineComponent定义组件时，template必须异步获取， 导致无法通过import导入定义的组件，必须定义异步函数创建组件，使用defineComponent定义父组件时，子组件必须异步获取
async await 的使用，使得代码简捷清晰，优雅地实现了vue文件的并行请求
<script type="module" src="index.js"></script>
导入loadVue方法：
import { loadVue } from './js/loadHtml.js'
加载App.vue组件：
let { useApp } = await loadVue('App.vue', 'app', undefined, true);
参数说明：
第1个参数：组件路径
第2个参数：容器ID
第3个参数：挂载节点id，不传则挂在body下面
第4个参数：是否在body中append模板(子组件这里不需要添加到body)
调用App.vue组件的方法：
await useApp();
导入loadVue方法：
import { loadVue } from './js/loadHtml.js'
方式一，通过loadVue方法，直接拿到子组件对象：
let { HelloVue3 } = await loadVue("/components/HelloVue3.vue", "helloVue3");
let { TestAsync } = await loadVue("/components/TestAsync.vue", "testAsync");
方式二，通过loadVue方法，拿到创建子组件的方法：
let { createTest } = await loadVue("/components/Test.vue", "test");
方式二，创建组件：
let Test = await createTest();
在App.vue组件中注册子组件：
const app = Vue.createApp({
name: "App",
components: {
HelloVue3,
Test,
TestAsync,
},
});
<hello-vue-3 title="我是HelloVue3组件"></hello-vue-3>
<test></test>
<test-async></test-async>
导入getVueTemplateFromCache方法：
import { getVueTemplateFromCache } from "/js/loadHtml.js";
调用getVueTemplateFromCache方法获取组件的模板：
template: getVueTemplateFromCache(componentName)
例如Test.vue组件中嵌套了Test2.vue组件：
let { createTest2 } = await loadVue("/components/Test2/Test2.vue", "test2");
components: {
Test2,
}
带缓存功能的路由组件：
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
import { loadVue } from "/js/loadHtml.js";
async function createRouter() {
let { BaiduMapPage } = await loadVue("/components/Maps/BaiduMapPage.vue", "baiduMapPage");
let { createMapPage } = await loadVue("/components/Maps/MapPage.vue", "mapPage");
let { createSuperMapPage } = await loadVue("/components/Maps/SuperMapPage.vue", "supermapPage");
let { createMapPage2 } = await loadVue("/components/Maps/MapPage2.vue", "mapPage2");
const routes = [
{
path: '/',
component: createMapPage
},
{
path: '/baiduMap',
component: BaiduMapPage
},
{
path: '/supermap',
component: createSuperMapPage
},
{
path: '/map2',
component: createMapPage2
}
]
const router = VueRouter.createRouter({
history: VueRouter.createMemoryHistory(),
routes,
})
return router;
}
export { createRouter }
let router = await createRouter();
app.use(router);
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手