vue2.x 单文件组件源码展示(仿组件库)实现_将当前组件代码转为代码块显示在页面上-CSDN博客

本文链接：https://blog.csdn.net/u014520406/article/details/125716485

本文档详细介绍了如何设计一个Vue组件，使其能够渲染子组件、展示源代码和说明文案。通过自定义loader获取组件源码，利用BasicDemoBlock组件进行组件和源码渲染，最终在Table组件的demos目录下批量呈现所有子组件的实例和源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义loader，功能：获取当前组件文件源代码以及指定代码块

使用自定义loader

定义组件BasicDemoBlock,功能：渲染组件|展示源码|展示说明

在index.vue批量引入demos目录下的所有组件

使用BasicDemoBlock组件进行组件渲染以及源码渲染

最终结果展示

设计目标

1.可以渲染组件

2.可以展示组件源代码

3.可以展示组件的说明文案

设计思路

1.设计一个组件，接受参数为组件实例对象。

2.渲染方案使用<component is="myComponent" />

3.源代码方案使用自定义loader,通过获取文件源码赋值给自定义属性。

4.说明文案同3

实例说明

目标：需要在@/views/Table/index.vue中渲染出./demos/下的所有子组件。

给子组件增加docs代码块

<docs>
  <source-title>简单表格</source-title>
  <source-desc>支持分页展示的简单表格示例</source-desc>
</docs>

自定义loader，功能：获取当前组件文件源代码以及指定代码块

const fs = require('fs');
const { baseParse } = require('@vue/compiler-core');

module.exports = function (source, map) {
    // 1. 获取带有 <docs /> 标签的文件完整路径
    const { resourcePath } = this
    // 2. 读取文件内容
    const file = fs.readFileSync(resourcePath).toString()
    // 3. 通过 baseParse 将字符串模板转换成 AST 抽象语法树
    // 3.1获取源代码信息标签内容
    const sourceInfoTag = baseParse(file).children.find(n => {
        return n.