Vue中如何进行Markdown文档展示与解析？

<template>
  <div class="markdown-container">
    <vue-markdown>{{ markdownContent }}</vue-markdown>
  </div>
</template>
 
<script>
import VueMarkdown from 'vue-markdown'
 
export default {
  components: { VueMarkdown },
  data() {
    return {
      markdownContent: `
# 标题
 
这是一个Markdown文档的例子。
 
- 列表项A
- 列表项B
 
**粗体文本**
 
[链接](https://example.com)
      `
    }
  }
}
</script>
 
<style>
.markdown-container {
  max-width: 800px;
  margin: auto;
}
</style>

这个例子中，我们使用了vue-markdown组件来渲染Markdown内容。首先，我们在<template>中定义了一个容器，并在其中使用<vue-markdown>标签来显示Markdown内容。然后，我们在<script>中导入了vue-markdown组件，并在组件的data函数中定义了Markdown内容的字符串。最后，我们在<style>中添加了一些基本的样式来美化显示效果。