Vue：引入markdown（.md)檔案

MarkDown

github:

https://github.com/QingWei-Li/vue-markdown-loader

安裝依賴

npm i vue-markdown-loader -D

# 樣式
npm i github-markdown-css -D
npm i highlight.js -D
      

vue

.config.js 中配置

chainWebpack: config => {
  config.module
    .rule("md")
    .test(/\.md/)
    .use("vue-loader")
    .loader("vue-loader")
    .end()
    .use("vue-markdown-loader")
    .loader("vue-markdown-loader/lib/markdown-compiler")
    .options({
      raw: true,
      preventExtract: true 
    });
};      

使用

<template>
  <!-- class markdown-body 必須加，否則标簽樣式會出現問題 -->
  <div class="markdown-body">
    <about />
  </div>
</template>

<script>
  import about from "./about.md";
  // 代碼高亮
  import "highlight.js/styles/github.css";
  // 其他元素使用 github 的樣式
  import "github-markdown-css";

  export default {
    components: {
      about
    }
  };
</script>      

ref

在 vue 中顯示 markdown（.md)檔案