如何构建一个可交互的组件文档

经常可以看到各种组件的文档，都是可交互，点开code按钮，还能查看对应的源码。

那么我们如果要写一个这种的话，最省事的，应该就是在源代码的基础上，我们增加一个按钮，然后点开可以查看源码，反正就是尽量和书写vue项目一样。

为了达到这个需要，我们有两个需求：

1. 怎么把vue文件作为代码文本显示
2. 代码文本怎么高亮

解决这两点我们也能简单的搭建一个类似的可以交互的组件文档了。

当然还有更高端的办法，就是自己写一个loader解析器，这个成本就很高了，一般人也不会这个，所以就不考虑了。

怎么把vue文件作为代码文本显示

webpack有一个插件： raw-loader

他可以把text文本或者vue文件这些文件，拿到他们的文本并展示出来。

为此我们需要先进行安装

yarn add raw-loader --dev

安装完毕我们需要配置这个解析器，但是由于vue文件默认是已经配好了解析器的，我们不能再去修改的，否则项目无法生成文件啊，所以，我们需要使用一个webpack的语法，单独指定某个文件使用这个解析器。

<template>
  <div>
    {{adminCode}}
  </div>
</template>
<script>
import adminCode from "!!raw-loader!./admin.vue";
export default {
  data(){
    return {
      adminCode,
    }
  }
}
</script>

通过在引入vue文件之前使用叹号指定一个loader解析器，我们就可以指定文件使用对应的解析器。

而且vue文件可以import自身vue文件的，所以我们怎么把vue文件作为代码文本显示问题解决。

代码高亮

vue有一个封装highlightjs代码高亮的插件，highlightjs我有所了解，如果有不知道了，可以看看他的官网。

highlightjs官网

vue插件：vue-highlightjs

安装：

yarn add vue-highlightjs --dev

该插件是一个自定义指令，所以我们需要在main文件里面激活，由于高亮的样式是css提供的，我们还需要引入想要的高亮css效果。

import Vue from 'vue';
import VueHighlightJS from 'vue-highlightjs';
import 'highlight.js/styles/github.css';

Vue.use(VueHighlightJS);

插件是封装highlightjs，所以这里我们可以直接从官方文档那拿到引用样式的import语法。

样式有很多，可以自己挑选合适的。

使用

样式和指令都激活了，我们就需要使用了

<template>
  <pre v-highlightjs="adminCode">
    <code class="html"></code>
  </pre>
</template>
<script>
import adminCode from "!!raw-loader!./admin.vue";
export default {
  data(){
    return {
      adminCode,
    }
  }
}
</script>

v-highlightjs绑定我们的代码文本

class="html"表明要渲染的代码高亮文本格式是html语言，不同的语言，高亮效果是不一样的，如果指定的语言和实际语言不相同，代码高亮效果可能会没有或者很奇怪。

这样我们代码高亮的效果也完成了。

剩下的就是一些封装优化了，比如增加点击复制按钮啊，点击展示源码按钮这些了。