木灵鱼儿

木灵鱼儿

阅读:642

最后更新:2020/12/12/ 23:57:05

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

经常可以看到各种组件的文档,都是可交互,点开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语言,不同的语言,高亮效果是不一样的,如果指定的语言和实际语言不相同,代码高亮效果可能会没有或者很奇怪。

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

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 642

相关文章