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);

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

（编辑：ASP站长）

【免责声明】本站内容转载自互联网，其相关言论仅代表作者个人观点绝非权威，不代表本站立场。如您发现内容存在版权问题，请提交相关链接至邮箱：bqsm@foxmail.com，我们将及时予以处理。