2024-07-17 xxx.vue?raw作用 ==> 把xxx.vue转换成源码，以字符串形式返回

常见ui库会有个代码预览，这是怎么做到的？就是通过导入一个vue文件的源代码，用pre和code包裹着显示的，比如：

<template>
  <div>
    <transition name="slide-fade">
      <pre v-highlight>
        <code class="language-js">
            {{ sourceCode }}                      
        </code>
       </pre>
    </transition>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  compName: {
    type: String,
    default: "button",
    required: true,
  },
  demoName: {
    type: String,
    default: "demo1",
    required: true,
  },
});
const sourceCode = ref("");

const getSourceCode = async () => {
  sourceCode.value = (
    await import(`@packages/${props.compName}/doc/${props.demoName}.vue?raw`)
  ).default;
  console.log("sourceCode.value", sourceCode);
};

onMounted(() => {
  console.log("props", props);
  getSourceCode();
});
</script>

<style lang="less" scoped>
code {
  padding: 0;
  white-space: pre-wrap;
}
</style>

看见这行代码的raw没有：await import(`@packages/${props.compName}/doc/${props.demoName}.vue?raw`)

如果不写这个，嘿！您猜怎么着。