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

在 Vue 中使用 Markdown 生成文档时，可以通过以下步骤自动生成侧边栏目录：

1. 在项目中安装 `markdown-it` 和 `markdown-it-anchor` 库：

npm install markdown-it markdown-it-anchor --save

2. 在 Vue 组件中引入并初始化 `markdown-it` 和 `markdown-it-anchor`：

import MarkdownIt from 'markdown-it'
import MarkdownItAnchor from 'markdown-it-anchor'

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
})
md.use(MarkdownItAnchor)

3. 在 Vue 组件中使用 `v-html` 指令渲染 Markdown 文本，并使用 `@hook:mounted` 钩子函数监听渲染完成事件，在事件处理函数中获取文档中所有标题标签（如 `h1`、`h2` 等），并根据标题级别生成目录树：

<template>
  <div>
    <div v-html="html"></div>
    <div class="sidebar">
      <ul>
        <li v-for="item in toc" :key="item.id">
          <a :href="'#' + item.id">{{ item.text }}</a>
          <ul v-if="item.children">
            <li v-for="child in item.children" :key="child.id">
              <a :href="'#' + child.id">{{ child.text }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: '',
      toc: [],
    }
  },
  mounted() {
    this.html = md.render('# Hello World\n## Introduction\n### Features\n### Installation\n## Usage\n## API Reference')
    this.$nextTick(() => {
      const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'))
      this.toc = headers.map(header => ({
        id: header.id,
        text: header.textContent,
        level: Number(header.tagName[1]),
      })).reduce((acc, header) => {
        let lastItem = acc[acc.length - 1]
        if (!lastItem || header.level <= lastItem.level) {
          acc.push(header)
        } else {
          let parent = lastItem
          while (parent.children && header.level > parent.level) {
            parent = parent.children[parent.children.length - 1]
          }
          if (!parent.children) {
            parent.children = []
          }
          parent.children.push(header)
        }
        return acc
      }, [])
    })
  },
}
</script>

4. 在 Vue 组件的样式中定义侧边栏样式：

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  padding: 20px;
  overflow-y: auto;
}

这样就可以在 Vue Markdown 文档中自动生成侧边栏目录了。当然，这只是一个简单的示例，实际项目中可能需要根据具体需求进行一些定制化调整。