加入收藏 | 设为首页 | 会员中心 | 我要投稿 天瑞地安资讯网_保定站长网 (https://www.52baoding.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 点评 > 正文

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

发布时间:2020-11-12 08:42:59 所属栏目:点评 来源:网络整理
导读:本博主想把代码全部拷过来,但是又觉得那样别人会直接不懂脑筋的抄袭,所以最后一步留了一点点,只要稍微用心一下就能看懂的哦。

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

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

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

(编辑:天瑞地安资讯网_保定站长网)

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

    推荐文章
      热点阅读