vue-markdown插件实现markdown文件预览（含目录大纲展示）

<template>
  <div class="markdown-preview">
    <vue-markdown>{{ markdownContent }}</vue-markdown>
  </div>
</template>
 
<script>
import VueMarkdown from 'vue-markdown'
import axios from 'axios'
 
export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      markdownContent: ''
    }
  },
  created() {
    this.fetchMarkdownContent()
  },
  methods: {
    fetchMarkdownContent() {
      axios.get('/path/to/your/markdown/file.md')
        .then(response => {
          this.markdownContent = response.data
        })
        .catch(error => {
          console.error('Error fetching markdown content:', error)
        })
    }
  }
}
</script>
 
<style>
/* 在这里添加样式 */
</style>

这个代码示例展示了如何在Vue应用中使用vue-markdown组件来加载和渲染一个Markdown文件的内容。它使用axios来异步获取Markdown文件内容，并在组件的数据部分中将其存储为字符串。然后，在模板中，它通过插值将Markdown内容传递给vue-markdown组件，最终渲染出预览效果。