1. 完整示例：vue-codemirror+vue3-sfc-loader实现在线编辑和预览功能

// Home.vue
<template>
  <div>
    <codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ height: '400px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
      @ready="handleReady"
      @change="log('change', $event)"
      @focus="log('focus', $event)"
      @blur="blur('blur', $event)"
    />
    <component :is="previewComp"></component>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, shallowRef } from "vue";
import * as Vue from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";
import { loadModule } from "vue3-sfc-loader";
const code = ref("");
const previewComp = shallowRef();
const extensions = [vue(), oneDark];

// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
  view.value = payload.view;
};
const log = (type, event) => {
  console.log(type, event, code.value);
};
const blur = () => {
  console.log(code.value);
  try {
    const options = {
      moduleCache: {
        vue: Vue
      },
      async getFile() {
        return code.value;
      },
      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)
    );
    console.log(comp);
    previewComp.value = comp;
  } catch (err) {
    console.error(err);
  }
};
</script>

2.实现在线编辑器:使用codemirror的vue版本vue-codemirror

详见https://github.com/surmon-china/vue-codemirror

<template>
  <div>
    <select name="" id="" v-model="lang" @change="langChange">
      <option :value="item.value" v-for="item in langList" :key="item.value">
        {{ item.label }}
      </option>
    </select>
  </div>
  <div>
    <codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ height: '400px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
      @ready="handleReady"
      @change="log('change', $event)"
      @focus="log('focus', $event)"
      @blur="blur('blur', $event)"
    />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, shallowRef } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vue } from "@codemirror/lang-vue";
import { oneDark } from "@codemirror/theme-one-dark";

const code = ref("");
const langList = ref([
  {
    label: "javascript",
    value: javascript
  },
  {
    label: "vue",
    value: vue
  }
]);
const lang = ref();
const previewComp = shallowRef();
lang.value = langList.value[1].value;
const extensions = [lang.value(), oneDark];

// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
  view.value = payload.view;
};

const langChange = () => {};

const log = (type, event) => {
  console.log(type, event, code.value);
};
</script>

3.预览:使用vue3-sfc-loader解析xxx.vue文件或者字符串

详见https://github.com/FranckFreiburger/vue3-sfc-loader

使用.vue文件

https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md

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

<script setup>
import { defineAsyncComponent, shallowRef} from "vue";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
const previewComp = shallowRef();
const init= () => {
  try {
    const options = {
      moduleCache: {
        vue: Vue
      },
      async getFile(url) {
        const res = await fetch(url);
        if ( !res.ok )
          throw Object.assign(new Error(url+' '+res.statusText), { res });
        return await res.text();
      },
      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)
    );
    console.log(comp);
    previewComp.value = comp;
  } catch (err) {
    console.error(err);
  }
};
init();
</script>

使用sfc文件类型的字符串模版

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

<script setup>
import { defineAsyncComponent, shallowRef} from "vue";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
const code = ref(`
<template>
  <span class="example">{{ msg }}</span>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'world!'
      }
    }
  }
<\/script>
<style scoped>
  .example {
    color: red;
  }
</style>
`)
const previewComp = shallowRef();
const init= () => {
  try {
    const options = {
      moduleCache: {
        vue: Vue
      },
      async getFile() {
        return code.value
      },
      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)
    );
    console.log(comp);
    previewComp.value = comp;
  } catch (err) {
    console.error(err);
  }
};
init();
</script>

4.如果只是简单实现vue官方演练场效果，可以使用官网的插件@vue/repl

详见https://github.com/vuejs/repl