vite里把markdown文件渲染成vue组件

在 Vue 项目中使用 unplugin-vue-markdown 渲染 Markdown

本文将详细介绍如何在 Vue 项目中通过 unplugin-vue-markdown 库实现 Markdown 文档的渲染，并添加代码高亮等样式美化效果。

一、安装核心依赖

首先需要安装 unplugin-vue-markdown 核心库，它是由 antfu 大神开发的 Vue 生态 Markdown 处理插件。

bash

csharp 复制代码

# 使用 npm 安装
npm i unplugin-vue-markdown

# 或使用 pnpm 安装（推荐）
pnpm add unplugin-vue-markdown

二、配置 Vite 环境

安装完成后，需要在 Vite 配置文件中进行插件配置，让 Vue 能够识别并处理 Markdown 文件。

修改 vite.config.ts 文件：

typescript

javascript 复制代码

// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Vue({
      // 关键配置：允许 Vue 编译 Markdown 文件
      include: [/.vue$/, /.md$/], 
    }),
    Markdown({ /* 这里可以添加 Markdown 插件的配置选项 */ }),
  ],
})

三、添加样式美化

此时 Markdown 已经可以渲染，但缺少基础样式和代码高亮效果，需要补充相关依赖。

3.1 安装样式依赖

bash

csharp 复制代码

# 使用 pnpm 安装
pnpm add github-markdown-css -D  # Markdown 基础样式
pnpm add highlight.js -D         # 代码高亮库

# 或使用 npm 安装
npm install github-markdown-css --save-dev
npm install highlight.js --save-dev

3.2 导入样式文件

在项目入口文件 main.ts 中导入所需的样式：

typescript

javascript 复制代码

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 导入 Markdown 基础样式（GitHub 风格）
import 'github-markdown-css/github-markdown.css'

// 导入代码高亮样式（使用 github-dark 主题，可根据喜好更换）
import 'highlight.js/styles/github-dark.css'

createApp(App).mount('#app')

提示：highlight.js 提供了多种主题样式，你可以在 node_modules/highlight.js/styles/ 目录下查看所有可选主题，并替换导入路径即可更换。

四、在组件中使用 Markdown

完成上述配置后，就可以在 Vue 组件中直接导入并使用 Markdown 文件了。

4.1 组件中引入 Markdown

创建或修改一个 Vue 组件（例如 HelloMarkdown.vue）：

vue

xml 复制代码

<template>
  <div class="markdown-container">
    <!-- 直接使用导入的 Markdown 组件 -->
    <HelloWorld />
  </div>
</template>

<script setup lang="ts">
// 导入 Markdown 文件作为组件使用
import HelloWorld from '@/assets/md/README.md'

// 可以在这里添加页面逻辑代码
</script>

<style scoped>
/* 可以添加自定义样式调整布局 */
.markdown-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

4.2 目录结构说明

确保你的 Markdown 文件路径与导入路径一致，推荐的目录结构：

plaintext

bash 复制代码

src/
├── assets/
│   └── md/
│       └── README.md  # 你的 Markdown 文档
├── components/
│   └── HelloMarkdown.vue  # 引用 Markdown 的组件
├── main.ts
└── vite.config.ts

五、效果展示

完成以上所有步骤后，运行项目即可看到渲染后的 Markdown 文档，包含：

正确的排版和格式
美观的 GitHub 风格样式
带有语法高亮的代码块
支持表格、列表、标题等 Markdown 语法

如图： 1.在WebStorm中，

2.在实际网页中

通过这种方式，你可以轻松地在 Vue 项目中集成 Markdown 文档，并利用 unplugin-vue-markdown 提供的丰富配置选项进行个性化定制。