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`)
如果不写这个,嘿!您猜怎么着。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步