【版本】
【步驟】1、安裝插件vue-markdown-loader
npm i vue-markdown-loader -D
ps：這個插件是基于markdown-it的，不需要單獨安裝markdown-it。
2、修改vue.config.js配置文件（如果沒有，在項目根目錄新建一個）：
module.exports = { chainWebpack: config => { config.module.rule('md') .test(//.md/) .use('vue-loader') .loader('vue-loader') .end() .use('vue-markdown-loader') .loader('vue-markdown-loader/lib/markdown-compiler') .options({ raw: true }) }}3、直接上代碼
App.vue
<template> <my-markdown></my-markdown></template><script>import myMarkdown from './assets/cpu.md';export default { components: { myMarkdown },</script>正常情況下，到這里就結(jié)束了。
【坑】
由于業(yè)務(wù)給我的Markdown文檔的標題是這樣的：
##物理CPU個數(shù)
物理CPU數(shù)就是主板上實際插入的CPU數(shù)量
……
得到的結(jié)果并不讓我滿意：
折騰了大半天才發(fā)現(xiàn)，這是由于標題的#井號和文字之間沒有空格導(dǎo)致的。證明見下：
var MarkdownIt = require('markdown-it'),md = new MarkdownIt();console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>Fine :)
愚蠢的我想出了一個解決辦法：
因為HyperDown.js能避免上面那樣的情況，于是我用它來對文檔做預(yù)處理。
npm install hyperdown -D
然后把vue.config.js改成了這樣。
let HyperDown = require('hyperdown');let parser = new HyperDown;module.exports = { chainWebpack: config => { config.module.rule('md') .test(//.md/) .use('vue-loader') .loader('vue-loader') .end() .use('vue-markdown-loader') .loader('vue-markdown-loader/lib/markdown-compiler') .options({ // markdown-it config preset: 'default', breaks: true, raw: true, typographer: true, preprocess: function(markdownIt, source) { return parser.makeHtml(source);//重點在這里！！！ } }) }}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
