markdown-it-vue 安装与配置 5 分钟跑通：从命令行到第一次渲染

markdown-it-vue 安装与配置 5 分钟跑通：从命令行到第一次渲染

【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue

如果你的 Vue 项目要展示 Markdown 内容，markdown-it-vue 安装 + 配置这套组合拳，几分钟就能从 0 跑到第一次渲染。它是个基于 markdown-it 解析引擎、用 JavaScript 编写的 Markdown 渲染组件——你可以把它理解成一个"翻译"：塞进一个标签，Markdown 文本就在浏览器里变成排版整齐的 HTML。这篇是一份完整的 markdown-it-vue 使用教程，从引入 Vue 项目、渲染 Markdown 到加插件，全部走一遍。

为什么不让 Markdown 直接进浏览器

浏览器根本不认识# 标题或**加粗**，这些对它来说只是一串文本，不是标记。想把文本变成页面，得靠一台"翻译引擎"，markdown-it 干的就是这个活。markdown-it-vue 把这台引擎包成了 Vue 组件（技术栈就是 JavaScript + Vue.js），并且默认整合了一大堆扩展，很多场景直接开箱可用：

所以大部分时候，你不用自己找插件拼装配比，标签往那一丢就完事了。⚙️

动手前先确认这些

写代码前，先确认你机器上有三样东西：

• Node.js：装最新稳定版即可
• 包管理器：npm 或 yarn 二选一都行
• 一个能跑起来的 Vue 项目

环境准备就这么多，组件本身不需要任何特殊配置。

安装命令一览与第一次渲染效果

先进项目目录，把组件装上：

npm install markdown-it-vue

用 yarn 的话换成yarn add markdown-it-vue。

接下来是 markdown-it-vue 怎么引入 Vue 项目的最短路径——注册组件，传一段 Markdown 字符串：

<template> <markdown-it-vue :content="content" /> </template> <script> import MarkdownItVue from 'markdown-it-vue' export default { components: { MarkdownItVue }, data: () => ({ content: '# 你好\n\n这是我的第一段 Markdown。' }) } </script>

然后执行npm run serve（yarn 用户：yarn serve）启动项目，打开浏览器，标题和正文应该已经排好版了。当 Markdown 内容变复杂时，组件的含金量才真正显现，下面这张长截图能说明问题：

左侧的自动目录、Mermaid 流程图、数学公式、高亮代码块，都是这一个组件渲染出来的。

:options 常用配置项

想调行为，不用改组件本身，通过:options把配置透传给底层引擎和各插件就行。比如让正文里的裸 URL 自动识别成链接：

<markdown-it-vue :content="content" :options="{ markdownIt: { linkify: true } }" />

在 options 里还能配linkAttributes这类选项，比如外链是否新标签页打开。绝大多数 markdown-it-vue 配置工作，入口都在这里。

markdown-it-vue 插件怎么加

内置插件覆盖不到的功能，也完全能自己补。组件实例会直接暴露底层的 markdown-it 实例，通过$refs就能追加任何兼容的 markdown-it 插件：

this.$refs.myMarkdownItVue.use(YourCustomPlugin)

模板里记得给标签加上ref="myMarkdownItVue"，插件引入后即可随时挂载——这也是接入整个 markdown-it 插件生态的标准姿势。🧩

要点一屏看完

仓库里带了一个可运行的演示，example/components/example.vue 值得翻一翻，看看全套插件配合起来是什么状态。下一步建议：先在自己项目里画一张 Mermaid 图或渲染一个数学公式，等它跑起来的那一刻，这个组件你就记住大半了。✅

【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue