美文网首页
Vue 中使用 markdown 和加载.md 文件

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

作者: ER_PM | 来源:发表于2019-10-10 10:22 被阅读0次

注意项目使用 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。

相关文章

网友评论

      本文标题:Vue 中使用 markdown 和加载.md 文件

      本文链接:https://www.haomeiwen.com/subject/jtkopctx.html