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

  那么我们假如要写一个此类的话,最省事的,应该就是在源代码的基础上,我们提高一个按键,然后点开可以查看源码,反正就是尽量跟抒写vue项目一样。

  为了达到这个还要,我们有两个需求:

  怎么把vue文件作为代码文本显示代码文本如何高亮

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

  当然也有更高档的方法,就是自己写一个loader解析器,这个费用就很高了,一般人也不会这个,所以就不考虑了。

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

  webpack有一个插件: raw-loader

  他可以把text文本或则vue文件这种文件,拿到她们的文本并展示下来。

  为此我们还要先进行安装

  <pre class="line-numbers">yarn add raw-loader --dev</pre>

  安装完毕我们还要配置这个解析器,但是因为vue文件默认是早已配好了解析器的,我们不能再去更改的,否则项目未能生成文件啊,所以,我们还要使用一个webpack的句型,单独指定某个文件使用这个解析器。

  <pre class="line-numbers">`

{{adminCode}}

import adminCode from "!!raw-loader!./admin.vue";
export default {
data(){

return {
  adminCode,
}

}
}
`</pre>

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

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

  代码高亮

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

  highlightjs官网

  vue插件:vue-highlightjs

  安装:

  <pre class="line-numbers">yarn add vue-highlightjs --dev</pre>

  该插件是一个自定义指令,所以我们还要在main文件上面激活typecho 代码高亮,由于高亮的款式是css提供的,我们还须要引进想要的高亮css疗效。

  <pre class="line-numbers">`import Vue from 'vue';
import VueHighlightJS from 'vue-highlightjs';
import 'highlight.js/styles/github.css';
Vue.use(VueHighlightJS);`</pre>

  插件是封装highlightjs,所以这儿我们可以直接从官方文档那领到引用款式的import句型。

  样式有很多,可以自己选购合适的。

  使用

  样式跟指令都激活了typecho 代码高亮,我们就须要使用了

  <pre class="line-numbers">`

    `
  

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

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

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

  剩下的就是一些封装优化了,比如降低点击复制按键啊,点击展示源码按键很多了。

Last modification:December 18th, 2020 at 04:13 am
如果觉得我的文章对你有用,请随意赞赏