NEWS
SEO资讯
您当前位置:华帅SEO > 站长资讯 > SEO资讯 > 正文
nuxt+vue项目中要实现展示markdown文件
作者:华帅技术部  更新时间:2020-11-05 20:37:18

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

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

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

NEWS站长资讯
  • 公司名称:合肥华帅SEO技术信息服务有限公司
    售后电话:15862658116
    Q  Q:1701743642
    邮  箱:dshuai0557@163.com
    地  址:合肥市肥东县燎原路与香石路交叉口5855号
    seo.caifuqn.com @ 2012-2028 合肥华帅SEO技术信息服务有限公司 , 皖ICP备11014979号 , 技术支持:润鸿网络|猪八戒|威腾互联|一团网|卢松松|搜爱外链|老铁商城|A5