Vue引入并使用md文件方法
第一步:在Vue项目中安装以下依赖:cnpm i markdown-loader html-loader --savecnpm i showdown --save第二步:在build/webpack.base.conf.js文件中做如下配置:(配置在module里边){test: /\.md$/,use: [{ loader: 'html-loade...
第一步:在Vue项目中安装以下依赖:
cnpm i markdown-loader html-loader --save
cnpm i showdown --save
第二步:在build/webpack.base.conf.js文件中做如下配置:(配置在module里边)
{
test: /\.md$/,
use: [
{ loader: 'html-loader' },
{ loader: 'markdown-loader', options: {} }
]
}
第三步:在main.js中引入并添加使用
import showdown from 'showdown'// 引入md文件
// 使用md文件
Vue.prototype.md2html = (md)=> {
let converter = new showdown.Converter();
let text = md.toString();
let html = converter.makeHtml(text);
return html
};
第四步:页面中使用,使用方法如下:
import readme from '../readmes/array-sort.md'// 引入md文件
data(){
return{
readme:this.md2html(readme),// 在data里边声明
}
},
<div v-html="readme"></div> // 最后在页面上使用
更多推荐
所有评论(0)