能用 markdown 写网页的 vue 组件，附带原理讲解我正在研究将自己的 app 进行上架，大部分应用商店都要求

以下是我在写这个组件时学习到的 webpack loader 和 vue-cli 插件的相关内容

先看效果

这个网页就是使用markdown写的，网页地址

为什么要写这个组件？

我正在研究将自己的 app 进行上架，大部分应用商店都要求 app 内要包含用户协议和隐私政策，我觉得这两个内容很适合用 markdown 来写，然后放在网页上，app 使用 webview 展示，方便以后实时更新。并且可以将 .md 文件放在云存储上，通过后台配置 .md 的url和名字，前台动态添加页面。

找轮子

看了几个相关项目，大部分都是直接将 .md 文件转成组件显示，与我的需求不符，我想要的是动态加载 .md 文件，要能支持远程的 .md 文件，发现其他项目无法满足要求，就开始自己造了。

组件分析

这个组件的主要功能是将 markdown字符串转为html，而这部分功能有现成的轮子 marked 可以使用，而我要做的就是读取 .md 文件转换成字符串，并且封装成组件。

主要逻辑

qing-markdown-loader Webpack loader，加载 .md 文件，并返回文件内内容字符串，以实现使 webpack 可加载 .md 文件的功能，qing-markdown 使用这个项目实现加载 .md 文件的功能

代码：
```
module.exports = function (markdown) {
 const markdownStr = JSON.stringify(markdown)
 return `export default ${markdownStr}`
}
```
webpack本身只能识别 .js 文件，如果要识别其他文件需要通过其他 loader 支持，这个 loader 的逻辑也很简单，就是将 .md 中的内容转换成字符串导出。webpack 默认return的内容是可执行的js代码，所以需要使用
```
return `export default ${markdownStr}` 
```
导出字符串

qing-markdown Vue Markdown 组件，markdown 字符串解析为 HTML 显示

<template>
    <div v-html="mdHtml"></div>
</template>

<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import marked from "marked";

  @Component
  export default class QMarkdown extends Vue {
    @Prop() private text: string

    get mdHtml() {
      if (this.text) {
        return marked(this.text)
      }
      return ''
    }
  }
</script>

传入markdown字符串，使用 marked 将其转换为 html 字符串，并且使用 v-html 显示

vue-cli-plugin-qing-markdown qing-markdown 的 vue-cli 插件，省去在vue.config.js 中配置loader的步骤
```
module.exports = api => {
  api.chainWebpack(webpackConfig => {
    // 通过 webpack-chain 修改 webpack 配置
    webpackConfig.module
      .rule('md').test(/\.md$/).use('qing-markdown-loader').loader('qing-markdown-loader')
  })
}
```
如果不使用 vue-cli ，则需要自己在 vue.config.js 中配置这段内容，通过 vue-cli 插件可以统一配置在插件内，让使用更加简便，直接通过 vue add 命令使用组件

结尾

这是我第一次写 webpack loader 和 vue-cli 插件，以上就是我这两天学习到的内容，分享给大家，希望可以帮助像我一样从没接触过这两块内容的同学更好的理解这两个概念。

求赞

如果觉得我写的还能看，就请帮忙点个赞或者评论下吧，以兹鼓励，谢谢了