Vue 中使用 markdown 和加载.md 文件

注意项目使用 CLL3+创建

首先安装marked插件

使用 npm

npm install marked -S

使用 yarn

yarn add marked

在组件中引入 marked

<!-- xx.vue -->
<template>
  <div v-html="md"></div>
</template>

<script>
  //引入marked
  const marked = require('marked')
  export default {
    data() {
      return {
        md: ''
      }
    },
    created() {
      // 调用marked函数，传入markdown格式的内容，返回一段html
      this.md = marked('# Marked in the browser\n\nRendered by **marked**.')
    }
  }
</script>

渲染图

加载外部.md 文件

<!-- helloMarked.md -->

# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五

要能够从外部导入.md 文件，我们还需要给项目安装两个 loader。

使用 npm

npm install html-loader markdown-loader -S

使用 yarn

yarn add html-loader markdown-loader

还需要做一步，在项目的根路径下创建 vue.config.js(假如没有的话)。

然后在vue.config.js文件中加入下面的配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

最后就能正常在组件中导入helloMarked.md文件

<!-- xx.vue -->
<template>
  <div v-html="md"></div>
</template>

<script>
  //引入marked
  const marked = require('marked')
  import helloMarked from './helloMarked.md' //导入！！！注意使用你存放的路径
  export default {
    data() {
      return {
        md: ''
      }
    },
    created() {
      // 调用marked函数，传入helloMarked，返回一段html
      this.md = marked(helloMarked)
    }
  }
</script>

渲染图

总结

• 项目中我们使用了marked插件来渲染markdown的内容。
• 如果要加载外部的.md文件，还需要给项目添加和配置两个loader，它们分别是html-loader 、markdown-loader。