vue显示md文件

可爱的瞌睡虫

于 2019-05-09 21:02:20 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue markdown

本文链接：https://blog.csdn.net/qq_42848534/article/details/90047843

本文详细介绍了如何在Vue项目中加载并显示Markdown文件，包括安装必要依赖、配置Webpack、定义转换函数及在页面上展示Markdown内容的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue显示md文件

环境搭建

<1>安装依赖库

cnpm i markdown-loader html-loader --save
    cnpm i showdown --save

<2>build/webpack.base.conf.js添加

 { 
      test: /\.md$/, 
      use: [ 
        { loader: 'html-loader' }, 
        { loader: 'markdown-loader', options: {} } 
      ] 
    }

<3>main.js添加函数

 import showdown from 'showdown'
    Vue.prototype.md2html = (md)=> {
      let converter = new showdown.Converter()
      let text = md.toString()
      let html = converter.makeHtml(text)
      return html
    }

页面中显示md文件

<1>导入需要的md文件, 注意需要添加后缀名

 import readme from '../../README.md'

<2>data定义变量

  data(){
      return {
        readme:this.md2html(readme)
      }
    }

<3>在模板中显示md文件

 <div v-html="readme">