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

 

注:本文参考以下作者:https://blog.csdn.net/qq_42848534/article/details/90047843

Logo

前往低代码交流专区

更多推荐