md解密 vue_vue组件库用markdown生成文档

前言：

开发 vue 组件库需要提供组件的使用文档，最好是有渲染到浏览器的 demo 实例，既能操作又能查看源代码。markdown 作为常用的文档编写载体，如果能在里面直接写 vue 组件，同时编写使用说明就再好不过。流行的组件库 element-ui 的文档就是用 markdown 写出来的，看了看其处理 md 的程序后，自己也决定写一个类似的处理程序，研究一下其中的细节。

技术点

1.markdown-it

处理 markdown 最常用的工具是 markdown-it，它能把我们写的 markdown 文件转换为 html。类似于 babel，markdown 也有自己的插件系统，通过设置或者编写自定义插件改变渲染的路径。

2.webpack-loader

处理 md 文件可以使用自定义 webpack-loader 来处理，先把 md 内容转为合适 html，然后再给 vue-loader 处理。

3.cheerio

使用 markdown-it 把 md 内容转为 html 之后，需要操作 html，cherrio 以类似 jquery 的方式操作 html，简单方便。

4.hljs

代码需要高亮渲染，hijs 的功能就是将代码处理成 html，通过样式使其高亮显示出来。

步骤

1.配置 webpack 解析 md

{

test: /\.md$/,

use:[

{loader: 'vue-loader'},

{ loader: path.resolve(__dirname,'./markdown-loader/index.js') }

]

},

2.markdown-loader 的入口

module.exports = function(source) {

this.cacheable && this.cacheable();

const { resourcePath = "" } = this;

const fileName = path.basename(resourcePath, ".md");

// @符号在markdown中是特殊符号

source = source.replace(/@/g, "__at__");

var content = parser.render(source).replace(/__at__/g, "@");

v