当前位置:首页 >  站长 >  编程技术 >  正文

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

 2020-11-05 14:23  来源: 田珊珊个人博客   我来投稿 撤稿纠错

  域名预订/竞价,好“米”不错过

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

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

文章来源:田珊珊个人博客

来源地址:http://www.tianshan277.com/836.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

热门排行

信息推荐