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

在 Vue 中使用 Markdown 渲染文档时，如果文档内容比较长，我们需要为用户提供侧边栏目录导航，方便用户快速定位到所需部分。下面是一个简单的方法来实现自动生成 Markdown 文档的侧边栏目录。

首先，我们需要安装 `markdown-it` 和 `markdown-it-toc`：

npm install markdown-it markdown-it-toc --save

然后，在 Vue 组件中引入并使用它们：

<template>
  <div>
    <!-- 目录导航 -->
    <div v-html="toc"></div>
    <!-- Markdown 内容 -->
    <div v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
import MarkdownItToc from 'markdown-it-toc'

export default {
  data() {
    return {
      markdown: '# 一级标题\n\n## 二级标题\n\n### 三级标题',
      toc: '', // 目录导航
      html: '', // 渲染后的 HTML
    }
  },
  mounted() {
    // 解析 Markdown 文档
    const md = new MarkdownIt()
    md.use(MarkdownItToc, { tocFirstLevel: 1 })
    const result = md.render(this.markdown)

    // 生成目录导航
    this.toc = md.toc
    // 渲染 Markdown 内容
    this.html = result
  },
}
</script>

在上面的代码中，我们使用了 `markdown-it-toc` 插件来自动生成目录导航，并将导航内容存储在 `toc` 变量中。然后，我们使用 `v-html` 指令将导航和 Markdown 文档内容渲染到页面上。

注意，`markdown-it-toc` 插件需要在解析 Markdown 文档之前使用 `md.use(MarkdownItToc)` 方法来注册。在注册时，我们可以设置 `tocFirstLevel` 属性来指定目录导航的起始层级，默认为 `1`。

最后，我们需要使用 CSS 样式来美化目录导航和 Markdown 内容，以便更好地展示给用户。