第一步:在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> // 最后在页面上使用

Logo

前往低代码交流专区

更多推荐