Vue 使用markdown

1. 前言
2. 需求
3. 安装 html-loader 与 markdown-loader
4. 配置 md 文件解析规则
5. 使用方法
• 最终效果 打码勿怪
6. 结语

前言

刚接到这个需求的时候，在项目中引入 .md 文件，需要对 markdown 语法进行解析，觉得很简单（的确很简单）但是这玩意的坑真的也让人很无奈。

网上找了很多的资料，要么就是有头没有尾，介绍的不是很详细，都没有写出痛点（这就很难过了）。本人通过实践并且在我们项目中平稳运行，想分享给后面的人，为大家排忧解难，哈哈。

需求

vue 项目中可以良好展示 markdown（只是展示功能 没有编辑功能）

安装 html-loader 与 markdown-loader

安装 html-loader 与 markdown-loader

npm i html-loader markdown-loader --save

这里注意了！html-loader 的版本号不能太新，不然是要报错的。

配置 md 文件解析规则

package.json 同级的目录下找到 vue.config.js，没有则新建一个，配置加载 md 文件的规则，如下：

module.exports = {
  //配置加载 md 文件时的解析规则
   chainWebpack: config => {
    config.module
      .rule('md')
      .test(/.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

如果大家嫌样式丑陋，可以安装 github-markdown-css

npm install github-markdown-css
import 'github-markdown-css'; //哪里用 markdown 就在哪里引用 可以放在 main.js

使用方法

<template>
  <div>
    <div  v-html="md">
    <!-- markdown-body 一定要写这个 class 名 -->
    </div>
  </div>
</template>
 
<script>
import demo from "@/assets/demo.md";
 
console.log(demo)
 
export default {
  data() {
    return {
      md:demo
    };
  }
};
</script>
 
<style lang="less" scoped>
// 这里可以约束解析出来后的 markdown 标签样式，如设置 h3{...}
</style>

最终效果 打码勿怪

结语

以上就是 vue 导入.md 文件使用 markdown-loader 解析 markdown 语法的详细内容，希望对大家有用。