nuxt+vue项目中要实现展示markdown文件

　 短视频，自媒体，达人种草一站服务

1、安装依赖

npm i markdown-loader html-loader --save

npm i showdown --save

2、配置nuxt.config.js文件

build: {

transpile: [/^element-ui/],

/*

** You can extend webpack config here

*/

extend (config, { isDev, isClient }) {

config.module.rules.push({

test: /.md$/,

use: [

{loader: 'html-loader'},

{loader: 'markdown-loader', options: {}}

],

})

}

},

3、markdown文件引入并转换

import readme from '~/static/api.md';

Vue.prototype.md2html = (md)=> {

let converter = new showdown.Converter()

let text = md.toString()

let html = converter.makeHtml(text)

return html

}

调用：this.md2html(readme);

本博主想把代码全部拷过来，但是又觉得那样别人会直接不懂脑筋的抄袭，所以最后一步留了一点点，只要稍微用心一下就能看懂的哦。

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!