在编写一个vue组件文档的时候，你是否有这样的需求呢？

• 通过markdown编写文档，然后import到vue里渲染。
• markdown 里编写vue实例。
• markdown 里加载外部的.vue/.md文件，并渲染成实例。

如果实现？

首先我们知道webpack配置这样

{
  rules: [
    {
      test: /\.md$/,
      use: [
        'vue-loader'
        'loader2',
        'loader1'
      ]
    }
  ]
}

webpack loader 加载顺序是这样的 loader1 => loader2 => vue-loader

所以，可以通过把markdown转成一个标准的 .vue 文件交给 vue-loader 就行。

vue-dotmd-loader 就是这么干的。

vue-dotmd-loader

Docs | Github

用于把 markdown 文件转成 Vue 组件的 webpack laoder 工具包。

import DocComponent from './doc.md'

export default {
    components: { DocComponent }
}

特性：

• 支持导入 Vue 文件组件渲染成 Vue 组件实例
• 代码块支持高亮指定行
• md里支持编写 Vue 代码和定义 script 渲染到当前组件
• 支持定义当前组件 style 样式
• md 添加 totolist 支持
• 支持代码块渲染组件（需要 Vue 的 esm 版本）
• 支持导入文件代码（渲染成代码高亮）
• 支持导入源码（比如导入html片段，注意：不会经过markdown编译）

Usage

安装

npm install -D vue-dotmd-loader

webpack配置

{
  rules: [
    {
      test: /\.md$/,
      use: [
        'vue-loader', // vue-dotmd-loader => vue-loader 必须的
        {
          loader: 'vue-dotmd-loader',
          options: options
        }
      ]
    }
  ]
}

options：

{
  wrapperName: 'DemoBlock', // 定义 demo 包裹组件（请全局注册好组件），如果空则仅渲染 demo
  fileDemoNamePerfix: 'FileDemo', // 文件 demo 组件名前缀
  blockDemoNamePerfix: 'BlockCodeDemo',// 代码块 demo 组件名前缀
  fileDemoTag: 'demo:vue', // 文件 demo 标记；格式：[demo:vue](filePath)
  blockDemoTag: 'demo:vue',// 代码块 demo 标记；格式：````html demo:vue code ````
  includeCodeTag: 'include:code', // 导入code，渲染成代码；格式：[include:code](filePath)
  includeRawTag: 'include:raw', // 导入html片段；格式：[include:code](filePath)
  dest: false, // 输出结果到文件；true/false/function
  dest (code, contextPath, resourcePath) {}, // 自定义写文件
  markdown: { // markdown-it options see: https://github.com/markdown-it/markdown-it#init-with-presets-and-options
    options: {
      html: false
    },
    notWrapper: false,
    init (md) {
      md.use(otherPlugin) // 添加 markdown-it 插件
    }
  }
}

eslint ignore

{
  "eslintIgnore": [
    "**/*.md"
  ]
}

如果你需要与本页面一样的样式，请按照如下引用 css。

import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/color-brewer.css'
import 'vue-dotmd-loader/src/docs.css'

Vue CLI

如果你使用 Vue cli 初始化的项目，请按照如下配置。

{
  // ...
  configureWebpack: {
    resolve: {
      extensions: ['.md'],
    }
  },
  chainWebpack (config) {
    // see: https://github.com/neutrinojs/webpack-chain
    config.module
      .rule('dotmd')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .options({
        ...(config.module.rules.get('vue').uses.get('vue-loader').get('options') || null) // 与 vue-loader 配置保持一致
      })
      .end()
      .use('vue-dotmd-loader')
      .loader('vue-dotmd-loader')
      .options({
        dest: true,
        markdown: {
          options: {
            html: true
          }
        }
      })
      .end()
  }
}