@hhm1999/vue-markdown-loader v1.1.2

用途

@hhm1999/vue-markdown-loader是一个能让markdown格式文档中的vue示例代码运行起来的loader。

安装

npm i @hhm1999/vue-markdown-loader --save-dev

webpack配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          { loader: 'vue-loader' },
          {
            loader: '@hhm1999/vue-markdown-loader',
            options: {demoContainerComponentName: 'mdDemoContainerComponent'}
          }
        ]
      }
    ]
  }
}

vue cli配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('@hhm1999/vue-markdown-loader')
      .options({
        demoContainerComponentName: 'mdDemoContainerComponent'
      })
      .end()
  }
}

Options

demoContainerComponentName

用来包裹示例代码及示例代码运行结果的组件名，该组件必须有component和code两个slot，分别用来放置示例代码及示例代码运行结果。

原理

原理请参考文章：让Markdown中的Vue代码运行起来