共计 644 个字符，预计需要花费 2 分钟才能阅读完成。
用 vuepress 写组件文档的困扰
近期在用 vuepress 给组件写文档，在展现用例的时候，总想同时展现源码。
然而导入代码段的语法 <<< @/filepath 写起来会有点烦，因为个别你的示例代码都是放在 docs/.vuepress/components 门路上面，这就导致你想引入组件代码，就得写好长一段门路。
而且，如果你的示例代码比拟多，上百行，到时候又会显得你的页面很长，体验不是很好。
如果可能像一些组件库的官网那样，代码能够点击查看，再收起，体验就会很好了。
没有现成的插件吗？
在写这个插件之前，有找过相干插件，但发现根本都有个 毛病 。就是都是把代码写在markdown 文件里，这样就得不到代码提醒之类的货色。
于是写了一个 vuepress 的插件 vuepress-plugin-code-example，用法也非常简略，只须要给到文件绝对于 docs/.vuepress/components 这个门路的地址即可。
::: code-example path-to-file
:::例如，你的组件门路是docs/.vuepress/components/demo.vue
::: code-example demo.vue
:::成果预览
也可查看我的组件库文档 erpack 在线体验成果。
有个小亮点
总会有示例代码很长很长，当你开展的时候，你再想收起来，就得往上翻好几下。
于是我给了一个按键交互，当你在看某个示例的时候，按下键盘上的 ESC 键能够切换源码的展现与暗藏。（须要先点击一下这个示例块）
欢送吐槽款式太丑的问题。
正文完
