使用Vite2+Vue3渲染Markdown文档的方法实践

使用Vite2+Vue3渲染Markdown文档的方法实践，可以按照以下步骤进行：

准备工作

1. 安装Node.js，下载地址：https://nodejs.org/en/download/。

2. 在终端中执行以下命令安装Vite：npm install -g vite。

3. 创建一个新的Vue3项目：npm init vite@latest project-name --template vue。

4. 进入项目目录：cd project-name。

5. 安装Marked和Highlight.js：npm install marked highlight.js。

6. 在项目根目录中创建一个markdown文件（例如test.md），并编写markdown内容。

实践步骤

1. 在Vue组件中引入Marked和Highlight.js：

import marked from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: (code) => {
    return hljs.highlightAuto(code).value;
  },
});

1. 定义一个Markdown组件：

<template>
  <div v-html="html"></div>
</template>

<script>
import marked from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: (code) => {
    return hljs.highlightAuto(code).value;
  },
});

export default {
  props: {
    source: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      html: '',
    };
  },
  async mounted() {
    const markdown = await import(`../markdown/${this.source}`);
    this.html = marked(markdown.default);
  },
};
</script>

1. 在需要渲染markdown文档的页面中使用Markdown组件，传入对应的markdown文件名：

<template>
  <div>
    <Markdown source="test.md" />
  </div>
</template>

<script>
import Markdown from '../components/Markdown.vue';

export default {
  components: {
    Markdown,
  },
};
</script>

1. 在浏览器中打开项目，即可看到渲染后的markdown文档。

示例说明

示例一

1. 在项目根目录中创建一个markdown文件（例如example-1.md），并编写markdown内容：

# Hello World!

这是一段代码：

```javascript
console.log('Hello World!');

2. 在需要渲染markdown文档的页面中使用`Markdown`组件，传入对应的markdown文件名：

```vue
<template>
  <div>
    <Markdown source="example-1.md" />
  </div>
</template>

<script>
import Markdown from '../components/Markdown.vue';

export default {
  components: {
    Markdown,
  },
};
</script>

1. 在浏览器中打开项目，即可看到渲染后的markdown文档。

示例二

1. 在项目根目录中创建一个markdown文件（例如example-2.md），并编写markdown内容：

# My favorite programming languages

- JavaScript
- Python
- Rust

1. 在需要渲染markdown文档的页面中使用Markdown组件，传入对应的markdown文件名：

<template>
  <div>
    <Markdown source="example-2.md" />
  </div>
</template>

<script>
import Markdown from '../components/Markdown.vue';

export default {
  components: {
    Markdown,
  },
};
</script>

1. 在浏览器中打开项目，即可看到渲染后的markdown文档。

以上就是使用Vite2+Vue3渲染Markdown文档的方法实践。