Vue3+Vite+TS项目中显示Vue组件源代码的方法

如上图所示，页面中包括Switch组件以及其源代码。
为实现该效果，首先需要在根目录创建vite.config.ts，基本思路是基本原理为在.vue文件中检测到关键字时将源代码封装成变量的其中一个属性，需要展示时直接调用。

// @ts-nocheck
import fs from 'fs'
import { baseParse } from '@vue/compiler-core'

export default {
    vueCustomBlockTransforms: {
	demo: (options) => {
            const { code, path } = options
		const file = fs.readFileSync(path).toString()
		const parsed = baseParse(file).children.find((n) => n.tag === 'demo')
		const title = parsed.children[0].content
		const main = file.split(parsed.loc.source).join('').trim()
		return `export default function (Component) {
                    Component.__sourceCode = ${JSON.stringify(main)}
                    Component.__sourceCodeTitle = ${JSON.stringify(title)}
                }`.trim()
        } /*  */,
    },
}

在需要展示源代码的组件代码中最开头加上关键字

<demo>
  常规用法 //示例名称，必填
</demo>

在页面中引入组件后将其作为变量返回

<script lang="ts">
import Switch from './Switch.vue'
export default {
  components: { Switch },
  setup() {
    return {
      switch
    }
  }
}
</script>

如果在页面中直接插入{{Switch}}，我们会得到Switch对象以及它的属性，如下图所示

想要展示源码，插入{{Switch__sourceCode}}即可