你瞅啥呢

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`)

如果不写这个,嘿!您猜怎么着。

 
posted @   叶乘风  阅读(29)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
历史上的今天:
2023-07-17 2023-07-17 无法获取该小程序信息==》你都没有上传过代码又怎么获取的了小程序信息呢?请先上传小程序代码吧!不管是体验版还是正式版!!
点击右上角即可分享
微信分享提示