当前位置：首页 > news >正文

vue3【实战】渲染 md 文件（markdown语法 .md后缀的文件）

news 2025/7/15 13:40:07

1. 安装相关插件

npm i unplugin-vue-markdown markdown-it-prism prism @unhead/vue

2. 添加配置

src/main.ts

// 给 md 文件创建头部
import { createHead } from '@unhead/vue'
// md 文件中代码高亮的样式
import 'prismjs/themes/prism.css'
// 自定义 md 文件的样式
import '@/assets/css/md.css'

app.use(createHead())

vite.config.ts

import Markdown from 'unplugin-vue-markdown/vite'
import prism from 'markdown-it-prism'
import { unheadVueComposablesImports } from '@unhead/vue'

Components 添加配置，包含 .md 文件和 .vue 文件

    Components({directoryAsNamespace: true,collapseSamePrefixes: true,include: [/\.vue$/, /\.vue\?vue/, /\.md$/]}),

VueRouter 添加配置，支持 .md 文件和 .vue 文件

    VueRouter({extensions: ['.vue', '.md']}),

AutoImport 添加配置 unheadVueComposablesImports

    AutoImport({// 解析的文件类型include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/ // .md],// 需自动导入方法的库imports: ['pinia','vue','@vueuse/core',// '@vueuse/components',// 项目中集成了 unplugin-vue-router 时，此处需用 VueRouterAutoImports 替换掉 'vue-router'VueRouterAutoImports,// 新增为 md 文件创建头部unheadVueComposablesImports]}),

vue 添加配置，包含 .md 文件和 .vue 文件

    vue({include: [/\.vue$/, /\.md$/]}),

plugins 新增 Markdown 配置

Markdown({ headEnabled: true, markdownItUses: [prism] }),

3. 添加 md 文件

比如 src/pages/notes/vue.md

---
title: 编程笔记- vue 实战笔记
meta:- name: vuecontent: vue实战笔记
test: 测试
---<Page># vue 实战笔记## 图片图片放在 public/imgs/ 中> 注意事项：是与 index.html 同级的 public 文件夹```html
<img src="/imgs/朝阳的微信二维码.jpg" alt="" />
```.</Page>

上文中，html 代码末尾的 . 因编辑需要添加，实际使用时，需去掉！

4. 创建 md 文件容器组件

src/components/Page.vue

<template><div style="padding: 20px"><slot></slot></div>
</template>

5. 自定义 md 文件样式

md 文件渲染后，会按 md 语法，渲染成 h1,p,blockquote 等 html 标签，可根据个人喜欢，自定义样式

新建文件 src/assets/css/md.css

h1 {font-weight: bold;font-size: 24px;
}h2 {font-weight: bold;font-size: 20px;line-height: 2
}blockquote {border-left: 3px red solid;padding-left: 6px;margin: 6px 0;font-size: 12px;
}