vue2 前端 markdown 怎么实现目录自动生成

实现 markdown 目录自动生成可以使用 markdown-it 插件，并结合 vue.js 实现。可以按以下步骤进行操作：

1. 安装依赖：`npm install markdown-it --save`
2. 在 vue 组件中引入 markdown-it：`import MarkdownIt from 'markdown-it'`
3. 创建 markdown-it 实例：`const md = new MarkdownIt()`
4. 解析 markdown 内容并生成 html：`const html = md.render(markdownContent)`
5. 使用正则表达式从生成的 html 中提取出所有标题（如 h1、h2、h3 等），并生成目录列表。
6. 将目录列表渲染到页面上。

以下是一个简单的实现示例：

<template>
  <div>
    <div class="markdown-body" v-html="html"></div>
    <div class="toc" v-html="toc"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data() {
    return {
      html: '',
      toc: '',
    }
  },
  mounted() {
    const md = new MarkdownIt()
    const markdownContent = '# Title1\nContent1\n## Title2\nContent2\n### Title3\nContent3'
    const html = md.render(markdownContent)
    const toc = this.generateToc(html)
    this.html = html
    this.toc = toc
  },
  methods: {
    generateToc(html) {
      const toc = []
      const headers = html.match(/<h\d.*?>(.*?)<\/h\d>/gi)
      if (headers) {
        headers.forEach((header) => {
          const level = header.match(/<h(\d).*?>/i)[1]
          const title = header.replace(/<\/?h\d>/gi, '')
          toc.push(`<li class="toc-level-${level}"><a href="#">${title}</a></li>`)
        })
      }
      return toc.length ? `<ul>${toc.join('')}</ul>` : ''
    },
  },
}
</script>

在上面的示例中，我们首先创建了一个 markdown-it 实例，然后使用 render 方法将 markdown 内容转换成 html。接着，我们通过正则表达式从 html 中提取出所有标题，并生成目录列表。最后，将目录列表渲染到页面上。

需要注意的是，上面的示例只实现了基本的目录生成功能。如果需要更复杂的功能，可以考虑使用已有的 markdown-it 插件或者编写自己的插件来实现。