vue 项目中引入 md 文件并展示

一 安装依赖

• vue-markdown-loader 内部使用markdown-it将Markdown文件转换为Vue组件。
• github-markdown-css GitHub Markdown样式的mini csss
• highlightjs-line-numbers.js 高亮Markdown 样式并插入行号

二 添加配置

• vue.config.js 中添加如下配置让 webpack 可以编译并解析 md 文件

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
      });
  }

• 由于我们的项目使用了 ts ,所以 tsconfig 也要配置可编译解析 md 文件。

三 使用方法

• 如下图，引入 md 文件，将 md 文件导入到页面，将导入的 md 当做Vue组件，直接使用即可，需要注意的是由于用了Markdown css 样式，所以需要在md 组件父组件上加固定的类名 markdown-body 。
  
  

四 最终效果如下