在vue中使用marked解析markdown文件

1、安装marked

npm install marked

2、在Vue中引用

<template>
  <div>
    <div v-html="output" class="html_output"></div>
  </div>
</template>
<script>
import {
    
     marked } from "marked"; // 局部导入marked包

export default {
    
    
  name: "test",
  data() {
    
    
    return {
    
    
    };
  },
  computed: {
    
    },
  watch: {
    
    },
  methods: {
    
    
    readFile: function () {
    
    
      let me = this;
      let url = "/static/test.md"; // 读取本地.md文件
      this.axios({
    
     url: url, baseURL: "" })
        .then((response) => {
    
    
          if (response.data) {
    
    
            me.output = marked(response.data); // 解析markdown文件到div显示
          }
        })
        .catch(function (err) {
    
    
          me.output = marked( // 找不到文件则显示一个默认错误，相当于404
            '<h1 class="h1-text">Sorry, this page is under construction</h1>'
          );
        });
    },
  },
  mounted: function () {
    
    
    this.readFile();
  },
};
</script>

<style>
.h1-text {
    
    
  text-align: center;
  margin-top: 10px;
}

.html_output {
    
    
  line-height: 2 !important;
  font-family: "Lato", sans-serif;
}
</style>