Analise o documento md em vue e exiba-o

Analise o documento md em vue e exiba-o

1. Primeiro introduza vários pacotes de análise

[Explicação:] markdown-loader, html-loaderé permitir que arquivos no formato vuesejam analisados md​​e lidos.

Convertamarked os dados lidos em htmlformato e renderize-os na página.

github-markdown-cssEstilo

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

2. Versões abaixo de vue-cli 3 são configuradas em webpack.base.conf.js, e versões acima de vue-cli 3 são configuradas em vue.config.js

configuração webpack.base.conf.js

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

Configuração vue.config.js:

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

3. Uso

Importe github-markdown-css em main.js

import 'github-markdown-css';

Onde precisar ser usado, introduza marcado, forneça o documento md para analisar, obtenha o conteúdo do formato HTML analisado e, em seguida, renderize o conteúdo analisado na página.

<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>