vue3-sfc-loader动态加载一个异步vue组件生成cesium画面

在 Vue.js 3 中，使用 vue3-sfc-loader 可以动态加载异步的 Vue 单文件组件（.vue 文件）。这个工具允许你在运行时根据需要加载和解析 .vue 文件，使得组件的加载变得更加灵活和动态。

下面是一个简单的示例，演示如何使用 vue3-sfc-loader 动态加载一个异步的 Vue 组件：

安装依赖： 首先，需要安装 vue3-sfc-loader 和 @vue/compiler-sfc（Vue 3 的单文件组件编译器）。

import { loadModule } from "vue3-sfc-loader";

开始加载时需要知道的事

defineAsyncComponent 是 Vue 3 提供的用于定义异步组件的函数

<template><div><component :is="previewComp"></component></div>
</template>

• <component :is="previewComp"></component> 是动态组件，根据 previewComp 的值来决定显示哪个组件。

 

import {ref,defineAsyncComponent,shallowRef,watch,onMounted,nextTick,
} from "vue";
import * as Vue from "vue";
import * as Cesium from "cesium";
import { loadModule } from "vue3-sfc-loader";
//映入你需要渲染的资源。包含js 在下面的代码中需要再次注册，

比如我们的vue下面仍然需要注册，第三方资源包也是如此

const init = (code: string) => {try {const options = {moduleCache: {vue: Vue,cesium: Cesium,},async getFile() {return code;},addStyle(textContent) {const style = Object.assign(document.createElement("style"), {textContent,});const ref = document.head.getElementsByTagName("style")[0] || null;document.head.insertBefore(style, ref);},};const comp = defineAsyncComponent(() =>loadModule("myComponent.vue", options));previewComp.value = comp;} catch (err) {console.error(err);}
};

• init 方法是初始化方法，根据传入的 code 加载模块并设置到 previewComp。

• moduleCache：这是一个对象，用来缓存模块。根据代码中的变量命名，它可能预先加载了一些模块，例如 Vue、FFCesium、Cesium、turf 和 CesiumNavigation。这些模块可以在加载 myComponent.vue 组件时使用。

• etFile() 函数：这是一个异步函数，返回值是传入的 code 参数，即函数初始化时传入的字符串。

• defineAsyncComponent() 是一个 Vue 3 提供的函数，用于定义异步组件。它接受一个函数作为参数，这个函数返回一个 Promise，用来加载和解析组件。
• loadModule("myComponent.vue", options) 调用 loadModule 函数加载名为 myComponent.vue 的 Vue 组件，并传入之前定义的 options 对象作为配置。

 就是这样拉。

然而我的示例里面previewComp是外面编辑器传进来的。展示一下源码

<template><div v-if="show" class="big"><component :is="previewComp"></component></div>
</template><script setup lang="ts">
import {ref,defineAsyncComponent,shallowRef,watch,onMounted,nextTick,
} from "vue";
import * as Vue from "vue";
import * as Cesium from "cesium";
import { loadModule } from "vue3-sfc-loader";
import * as turf from "@turf/turf";
import * as CesiumNavigation from "cesium-navigation-es6"; //指南针插件
import FFCesium from "@/FFCesium/core/index.js";let show = ref(false);
// import { particle } from "../cesium/resoure/index.ts";
const props = defineProps({code: {type: String,required: true,},
});
watch(() => props.code,(newValue, oldValue) => {// 这里可以执行其他操作console.log("监听");init(newValue);}
);onMounted(() => {// 初始化show.value = true;// 初始化init(props.code);
});
const setCode = (code: string) => {show.value = false;// 重新渲染显示页，解决改错报错不再回归console.log("yunx,shuoax");nextTick(() => {show.value = true;// 在父组件里面再调用一次init(code);});
};defineExpose({ setCode });const previewComp = shallowRef();
const init = (code: string) => {// console.log("FFCesium12", FFCesium);try {const options = {moduleCache: {vue: Vue,FFCesium: FFCesium,cesium: Cesium,turf: turf,CesiumNavigation: CesiumNavigation,},async getFile() {return code;},addStyle(textContent) {const style = Object.assign(document.createElement("style"), {textContent,});const ref = document.head.getElementsByTagName("style")[0] || null;document.head.insertBefore(style, ref);},};const comp = defineAsyncComponent(() =>loadModule("myComponent.vue", options));previewComp.value = comp;} catch (err) {console.error(err);}
};
// // 初始化
// init(props.code);
</script>
<style scoped>
.big {width: 100%;height: 100%;
}
</style>