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">