vuecli3 + markdown制作组件文档

1、安装脚手架并运行
2、安装markdown-to-vue-loader 实现加载md文档并运行里面的vue代码

cnpm i markdown-to-vue-loader vue-loader   -D

配置vue.config.js，并设置解析md文档的部分规则

module.exports = {
    ....
    chainWebpack: (config) => {
        config.module
            .rule("md")
            .test(/.md$/)
            .use("vue-loader")
            .loader("vue-loader")
            .end()
            .use("markdown-to-vue-loader")
            .loader("markdown-to-vue-loader")
            .options({
                componentWrapper: "<div class='markdown-component'></div>",
                preClass: "markdown-pre-class",
                preWrapper: "<div class='markdown-example-code'></div>",
                tableClass: "markdown-table-class",
                tableWrapper: "<div class='markdown-table-container'></div>",
            })
            .end();
    },
};

3、重新运行，即可把md文档当做组件加载

const active =  {
    component: () => import("./comp/quarterPicker.md"),
}

<component :is="active.component" />

4、如何在md文档里添加vue并运行代码，参考 https://www.npmjs.com/package/markdown-to-vue-loader
5、将动态组件单独提出，实现给md文档添加样式且不影响其内组件样式。 首先需要给动态组件添加外层包裹，并单独提出来，以下是给代码块添加高亮，给md文档添加样式的代码。

<template>
    <div class="markdown-component-worp">
        <component :is="active.component" />
    </div>
</template>

<script>
import hljs from "highlight.js";
import "./markdown.scss";
import "highlight.js/scss/default.scss";
import "highlight.js/styles/color-brewer.css";

const addData = (el) => {
    if (el && el.childNodes) {
        el.childNodes.forEach((node) => {
            if (
                node.nodeType == 1 &&
                node.className != "markdown-component" &&
                node.className != "markdown-table-container" &&
                node.className != "markdown-example-code"
            ) {
                node.setAttribute("data-md", node.nodeName);
                addData(node);
            }
        });
    }
};

export default {
    name: "ComponentWarp",
    props: {
        active: {
            type: Object,
            default: null,
        },
    },
    updated() {
        document.querySelectorAll("pre code").forEach((el) => {
            if (el.className == "language-vue") {
                el.className = "language-html";
            }
            hljs.highlightElement(el);
        });
        let worp = document.querySelector(".markdown-component-worp");
        addData(worp);
    },
};
</script>

<style lang="scss">
.markdown-component-worp {
    background: #fff;
    .markdown-component {
        border: 1px solid #f1f1f1;
        border-bottom: none;
        padding: 35px 25px 25px;
        position: relative;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        &::before {
            position: absolute;
            left: 0;
            top: 0;
            content: "demo";
            font-size: 10px;
            padding: 2px 5px;
            color: #8cc5ff;
            background: #ecf5ff;
        }
    }
    .markdown-example-code {
        border: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        margin-bottom: 50px;
        pre {
            padding: 10px;
            box-shadow: 0px 0px 5px #f1f1f1 inset;
            // max-height: 400px;
            overflow: scroll;
        }
    }

    pre {
        tab-size: 4;
    }
}
</style>

css样式

.markdown-component-worp {

    [data-md='H1'],
    [data-md='H2'],
    [data-md='H3'],
    [data-md='H4'] {
        color: #111111;
        font-weight: 400;
        margin-top: 1em;
    }

    [data-md='H1'],
    [data-md='H2'],
    [data-md='H3'],
    [data-md='H4'],
    [data-md='H5'] {
        font-family: Georgia, Palatino, serif;
    }

    [data-md='H1'],
    [data-md='H2'],
    [data-md='H3'],
    [data-md='H4'],
    [data-md='H5'],
    [data-md='P'],
    [data-md='DL'] {
        margin-bottom: 16px;
        padding: 0;
    }

    [data-md='H1'] {
        font-size: 48px;
        line-height: 54px;
    }

    [data-md='H2'] {
        font-size: 36px;
        line-height: 42px;
    }

    [data-md='H1'],
    [data-md='H2'] {
        border-bottom: 1px solid #EFEAEA;
        padding-bottom: 10px;
    }

    [data-md='H3'] {
        font-size: 24px;
        line-height: 30px;
    }

    [data-md='H4'] {
        font-size: 21px;
        line-height: 26px;
    }

    [data-md='H5'] {
        font-size: 18px;
        list-style: 23px;
    }

    [data-md='A'] {
        color: #0099ff;
        margin: 0;
        padding: 0;
        vertical-align: baseline;

        &:hover {
            text-decoration: none;
            color: #ff6600;
        }
    }

    [data-md='UL'],
    [data-md='OL'] {
        padding: 0;
        padding-left: 24px;
        margin: 0;
        margin-bottom: 20px;

        li {
            line-height: 24px;
        }

    }

    [data-md='P'],
    [data-md='UL'],
    [data-md='OL'] {
        font-size: 16px;
        line-height: 24px;
    }

    [data-md='OL'] [data-md='OL'],
    [data-md='UL'] [data-md='OL'] {
        list-style-type: lower-roman;
    }

    [data-md='BLOCKQUOTE'] {
        border-left: .5em solid #eee;
        padding: 0 0 0 1em;
        margin-left: 0;

        cite {
            font-size: 14px;
            line-height: 20px;
            color: #bfbfbf;
        }

        cite:before {
            content: '\2014 \00A0';
        }

        p {
            color: #666;
        }
    }

    [data-md='HE'] {
        text-align: left;
        color: #999;
        height: 2px;
        padding: 0;
        margin: 16px 0;
        background-color: #e7e7e7;
        border: 0 none;
    }

    [data-md='DL'] {
        padding: 0;

        dt {
            padding: 10px 0;
            margin-top: 16px;
            font-size: 1em;
            font-style: italic;
            font-weight: bold;
        }

        dd {
            padding: 0 16px;
            margin-bottom: 16px;
            margin-left: 0;
        }
    }

    .markdown-table-container {
        table {
            width: 100%;
            max-width: 1000px;
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    }
}