在vue中解析md文档并显示

在vue中解析md文档并显示

一、首先引入几个解析包

【说明:】markdown-loader、html-loader是为了让vue能够解析md格式的文件，读取出来，

​ marked将读取出来的数据转换成html格式渲染到页面上。

​ github-markdown-css样式

npm install markdown-loader html-loader marked github-markdown-css -S

二、vue-cli 3 以下版本webpack.base.conf.js中配置，vue-cli 3 以上版本则在vue.config.js中配置

webpack.base.conf.js 配置

// 在 module > rules 中添加一条规则
module: {
    
    
    rules: [
        // 配置读取 *.md 文件的规则
        {
    
    
            test: /\.md$/,
             use: [
                {
    
     loader: 'html-loader' },
                {
    
     loader: 'markdown-loader', options: {
    
    } }
             ]
        }
    ]
}

vue.config.js 配置：

module.exports = {
    
    
  configureWebpack: {
    
    
    module: {
    
    
      rules: [
        // 配置读取 *.md 文件的规则
        {
    
    
          test: /\.md$/,
          use: [
            {
    
     loader: "html-loader" },
            {
    
     loader: "markdown-loader", options: {
    
    } }
          ]
        }
      ]
    }
  }
};

三、使用

在 main.js 中将 github-markdown-css 导入

import 'github-markdown-css';

在需要使用的地方，引入 marked，再将 md 文档交给它来解析，获得到解析后的 HTML 格式内容，再将解析后的内容渲染到页面上

<template>
    <div v-html="articalContent" class="markdown-body"></div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      articalContent: ""
    };
  },
  created() {
    
    
    this.$axios.get("/articles/test.md").then(res => {
    
    
		const marked = require("marked");
        const htmlMD = marked(res.data);
        this.articalContent = htmlMD;
      });
  }
};
</script>

<template>
	<div v-html="articalContent" class="markdown-body"></div>
</template>
<script>
import DemoMd from '../md/Vue组件化.md';
export default {
    
    
    data() {
    
    
        return {
    
    
            articalContent: ""
        };
    },
    mounted() {
    
    
        const {
    
     marked } = require("marked");
        this.articalContent = marked(DemoMd);
    }
};
</script>