Vue实战引入并使用md文件

Vue引入并使用md文件方法

第一步： 在Vue项目中安装以下依赖：

cnpm install markdown-loader html-loader --save  
cnpm install showdown --save

第二步： 在webpack.config.js文件中做如下配置

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

第三步： 在main.js中引入并添加使用

// 引入md文件

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

第四步： 页面中使用，使用方法如下：

// 引入md文件

import readme from '../readmes/array-sort.md'  
data(){  
    return{  
        readme:this.md2html(readme) // 在data里边声明  
    }  
}  
<div v-html="readme"></div> // 最后在页面上使用