vue2 markdown 生成--自动生成markdown文档侧边栏目录

可以使用 `markdown-it` 和 `markdown-it-toc-done-right` 这两个库来生成侧边栏目录。

首先安装这两个库：

npm install markdown-it markdown-it-toc-done-right --save

然后在 Vue 组件中使用它们：

<template>
  <div>
    <div class="sidebar">
      <div v-html="toc"></div>
    </div>
    <div class="content">
      <div v-html="html"></div>
    </div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
import MarkdownItTocDoneRight from 'markdown-it-toc-done-right'

export default {
  data() {
    return {
      html: '',
      toc: ''
    }
  },
  mounted() {
    const md = new MarkdownIt()
    md.use(MarkdownItTocDoneRight)
    const content = '# Hello\n\n## World\n\n### Vue\n\n#### Markdown\n'
    this.html = md.render(content)
    this.toc = md.toc
  }
}
</script>

<style>
.sidebar {
  float: left;
  width: 200px;
  margin-right: 20px;
}

.content {
  overflow: hidden;
}
</style>

在上面的代码中，我们创建了一个 `MarkdownIt` 实例，并使用 `MarkdownItTocDoneRight` 插件来生成目录。然后使用 `md.render` 方法将 Markdown 文本渲染为 HTML，使用 `md.toc` 方法生成目录 HTML，将它们都赋值给组件的 data 中的变量，在模板中使用 `v-html` 将它们渲染出来。最后使用 CSS 将侧边栏和内容区域布局好即可。