博客

一 安装依赖

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

四 最终效果如下