markdown-it-vue 快速上手指南3 步在 Vue 项目中跑通 Markdown 渲染【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vuemarkdown-it-vue 是为 Vue 2 做的 Markdown 渲染组件开箱就能渲染 GFM、公式、mermaid 图表。如果你想在页面里放一个 Markdown 展示区照这篇做完 3 步就能跑起来。一、markdown-it-vue 是什么、适合谁它把markdown-it和二十多个扩展插件打包进了一个 Vue 组件你只管传内容解析、插件、样式全部内置。适合博客后台、文档站、任何需要展示用户提交 Markdown 的场景。markdown-it核心解析引擎负责把 Markdown 源码转成 HTML。Vue 2组件基于 Vue 2.xVue 3 项目不适用。内置扩展插件emoji、脚注、KaTeX 公式、mermaid、ECharts、任务列表等免逐个安装。github-markdown-css默认样式与 GitHub 渲染风格一致装完即有观感。二、开始之前的环境自检动手前先花一分钟确认三件事能省掉后面大半的折腾Node.js运行node -v查看版本。示例工程基于 vue-cli 4 构建推荐 Node 14 或 16Node 17 会触发 OpenSSL 兼容问题见第四章。包管理器运行npm -v或yarn -v任一可用即可下文命令两种都会给出。项目 Vue 版本打开package.json确认vue是^2.x。⚠️ 这是硬前提Vue 3 项目请换用其他方案。三、分阶段实操一条命令装好依赖在你的 Vue 项目根目录执行安装命令它会把组件及所有内置依赖拉进node_modulesnpm install markdown-it-vue习惯用 Yarn 的话等价写法是yarn add markdown-it-vue执行完检查package.json的dependencies里多了markdown-it-vue就算成功。跑通最小渲染示例新建一个组件注意import有两行第一行引入组件第二行引入样式缺一不可template div markdown-it-vue classmd-body :contentcontent / /div /template script import MarkdownItVue from markdown-it-vue import markdown-it-vue/dist/markdown-it-vue.css export default { components: { MarkdownItVue }, data() { return { content: # Hello, markdown-it-vue } } } /script页面里出现 GitHub 风格的标题样式说明渲染已生效。按需调整 options 配置项默认行为不满足时用:options属性覆盖它同时接收 markdown-it 本身的选项和内置插件的选项markdown-it-vue classmd-body :contentcontent :optionsoptions /options: { markdownIt: { linkify: true // 默认 false开启后裸 URL 自动变成可点链接 }, linkAttributes: { attrs: { target: _blank, rel: noopener } // 默认 _blank外链新窗口打开 }, image: { hAlign: left, // 默认左对齐可改 center / right viewer: true // 默认开启点击图片弹出查看器 } }改完刷新页面对应行为立即变化这就是成功标志。用 use 方法接入扩展插件需要内置之外的能力时给组件加ref再调用use挂载插件markdown-it-vue refmyMarkdownItVue classmd-body :contentcontent /this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)标准 markdown-it 插件都兼容。验证方式在content里写一段新插件支持的语法能正常渲染即接入成功。跑官方示例验证全部能力想一次看全 mermaid、公式、ECharts 等效果克隆仓库跑内置 demogit clone https://gitcode.com/gh_mirrors/ma/markdown-it-vue cd markdown-it-vue yarn install yarn dev然后打开http://localhost:8080/。左侧是编辑框、右侧是实时渲染区改左侧文字右侧同步更新说明环境完全没问题。四、常见报错与验证现象能渲染但样式全无一坨裸文本。原因漏掉了markdown-it-vue.css的引入。解法在引入组件的同一处补上这行 import。现象控制台报Failed to resolve component: markdown-it-vue。原因组件没注册进components。解法检查components: { MarkdownItVue }是否与 import 的变量名一致。现象构建报error:0308010C digital envelope routines::unsupported。原因Node 17 的 OpenSSL 3.0 与 webpack 4 工具链不兼容。解法切回 Node 14/16或设置环境变量NODE_OPTIONS--openssl-legacy-provider后重试。跑到这里Markdown 渲染已经稳稳落在你的项目里。下一步建议去官方仓库的README.md里过一遍options全部可配项按需微调。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考