【版本】

vue-cli3 [emailprotected]【步骤】1、安装插件降价装载机

npm i vue-markdown-loader -Dps:这个插件是基于减价出售的，不需要单独安装减价出售。

2、修改vue.config.js配置文件（如果没有，在项目根目录新建一个):

模块。导出={ chainweb pack k : config={ config。模块。规则(MD).测试(/。md/).使用(“vue-loader”).装载机(“真空装载机”).end().使用(' vue-markdown-loader ').加载程序(“vue-markdown-loader/lib/markdown-compiler”).选项({ raw: true }) }}3、直接上代码

App.vue

模板my-markdown/my-markdown/template script从“”导入我的markdown ./资产/CPU。“MD”；导出默认{ components: { myMarkdown }，/script正常情况下，到这里就结束了。

【坑】

由于业务给我的减价文档的标题是这样的：

##物理中央处理器个数物理中央处理器数就是主板上实际插入的中央处理器数量……

得到的结果并不让我满意：

折腾了大半天才发现，这是由于标题的#井号和文字之间没有空格导致的。证明见下：

var MarkdownIt=require(' markdown-it ')，MD=new MarkdownIt()；控制台。日志(MD . render)(# markdown-it rule ZZ！)))//h1markdown-it rulezz！/h1控制台。日志(MD . render(# markdown-it rule ZZ)！))//p#markdown-it rulezz！/pFine :)

愚蠢的我想出了一个解决办法：

因为HyperDown.js能避免上面那样的情况，于是我用它来对文档做预处理。

安装HyperDown.js

新公共管理安装超向下然后把vue.config.js改成了这样。

让hyperDoWn=require(' hyperDoWn ')；let parser=新的HyperDownmodule。导出={ chainweb pack k : config={ config。模块。规则(MD).测试(/。md/).使用(“vue-loader”).装载机(“真空装载机”).end().使用(' vue-markdown-loader ').加载程序(“vue-markdown-loader/lib/markdown-compiler”).选项({//markdown-it config预设： ' default '，breaks: true，raw: true，printer : true，预处理：函数(markdown it，source){ return parser。制作html(源码)；//重点在这里！} }) }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。