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 提供的丰富配置选项进行个性化定制。

相关推荐
桃子不吃李子2 小时前
nextTick的使用
前端·javascript·vue.js
小二·4 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子4 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_419854054 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js
你的电影很有趣4 小时前
lesson74:Vue条件渲染与列表优化:v-if/v-show深度对比及v-for key最佳实践
前端·javascript·vue.js
Onlyᝰ6 小时前
前端tree树
javascript·vue.js·elementui
葡萄城技术团队7 小时前
Vue 生态下前端 Excel 导入导出终极方案:SpreadJS 实战指南
vue.js
哟哟耶耶7 小时前
Starting again company 03
前端·javascript·vue.js
华仔啊9 小时前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
明月与玄武9 小时前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js