使用的example.md

实现在vue的template中显示出如下效果

1. 安装showdown

sudo cnpm install --save showdown

2. 安装markdown-loader和html-loader

sudo cnpm i markdown-loader html-loader --save 

3. 在main.js文件中引入

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
}

4. 在webpack.base.conf.js 中添加 rules 规则

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

5. markdown.vue

<template>
  <div id='markdown' class="main">
    <div v-html="md"></div>
  </div>
</template>
<script>
  import hljs from 'highlight.js'
  //import 'highlight.js/styles/monokai-sublime.css';
  import 'highlight.js/styles/atom-one-dark.css'; // 样式可以参考官网内容https://highlightjs.org/
  const highlightCode = () => {
    const preEl = document.querySelectorAll('pre')
    preEl.forEach((el) => {
      hljs.highlightBlock(el)
    })
  }
  export default {
    name:'markdown',
    data () {
      return {
        md: '',
      }
    },
    components: {
    },
    created(){
      var filename='example.md' // 向后端node.js请求example.md文件
      this.$axios('http://127.0.0.1:3000/getmd',{
        params:{
          filename:filename
        }
      }).then(res=>{
        this.md=this.md2html(res.data) // 获取后端传输的数据
        console.log(this.md)
      })
    },
    mounted () {
      highlightCode()
    },
    updated (){
      highlightCode()
    },
    methods:{
    }
  }
</script>
<style>
</style>

6. 负责读取文件的后端文件node.js

var express=require('express');
var path = require('path'); //系统路径模块
var fs = require("fs"); // 文件模块
var app=express();
// 设置所有域名跨域
app.all('*',function(req,res,next){
  res.header("Access-Control-Allow-Origin","*")
  res.header("Access-Control-Allow-Headers","X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  res.header("Cache-Control","no-store"); // 304 ??
  next();
});
app.get('/getmd',function(req,res){
  console.log('访问getmd接口')
  var filename=req.query.filename
  var file=path.join(__dirname,'md/'+filename);
  fs.readFile(file,'utf-8',function(err,data){
    if(err){
      res.send('读取md文件失败！')
    }
    else{
      res.send(data) // 返回读取的数据
    }
  });
})
app.listen(3000,function(){   //监听3000端口
  console.log("Server running at 3000 port");
});