开发一个 UI 组件库时，将 Markdown 转换成 Vue 组件是一个常见需要，特地是在创立文档或样例展现时，此时咱们须要将它转换为组件

咱们先看一下

Vue2

咱们先看一下，我如何在vue.config.js如何配置把Markdown 转换成 Vue 组件

 config.module.rule('md').    test(/\.md/).    use('vue-loader').    loader('vue-loader').    options({        compilerOptions: {            preserveWhitespace: false,        },    }).    end().    use('markdown-loader').    loader(require('path').        resolve(__dirname, './build/md-loader/index.js')). // 这外面的代码有很多    end()

目录md-loader/index.js

这是一个loader，留神它的加载程序是从右往左，这是开发一个插件的根底，感兴趣的同学能够看一下

Vite如何转换

相比webpack转换vite转换则要不便的多，当然得益于社区的弱小和反对的奉献

这是一个转换后的后果

用vite去做转换，好在有人曾经开发好了很多插件，所以只须要咱们装置下即可

pnpm add vite-plugin-doc-preview
// vite.config.tsimport { defineConfig } from 'vite'import Vue from '@vitejs/plugin-vue'import Markdown from 'unplugin-vue-markdown/vite'import MarkdownPreview from 'vite-plugin-markdown-preview'export default defineConfig({  plugins: [    Vue({      include: [/.vue$/, /.md$/],    }),    Markdown({      component: true,        previewId: 'vue'    })  ],})

自定义预览组件

如果默认的款式不能满足需要，能够全局注册一个 CodePreview 组件来代替默认组件

app.component('CodePreview', MyCodePreview)

CodePreview 须要按约定反对如下 props 和 slot

  • props

    • lang string 代码块的 lang
    • meta string // 代码块的 meta 信息
    • code string // 代码块的原始代码

  • slot

    • default 代码块生成的 vue 组件将会以 slots.default 传递过去
    • code 代码块通过高亮转换为 html 将会以 slots.code 传递过去

自定义组件的列子

<template>  <div class="code-preview">      <div class="px-4 py-4">          <slot></slot>      </div>      <slot name="code"></slot>  </div></template><script setup>import {onMounted, defineProps} from "vue"const props = defineProps({  lang: {      type: String,  },  meta: {      type: String,  },  code: {      type: String,  }})</script><style lang="less">pre code.hljs, .code-preview {  border-radius: 3px;  background-color: #fffdfd;  line-height: 28px;  font-size: 16px;}.code-preview {  border: 1px solid #f6f8fa;  code.hljs {      border: none;      border-radius: 0;  }}</style>

以上插件基于unplugin-vue-markdown开发的

unplugin-vue-markdown 是一个插件，能够让你间接在 Vue 我的项目中以组件的模式应用 Markdown 文件。这个插件能够与 Vite、Webpack、Rollup 等古代前端工具链配合应用，使得在 Vue 利用中引入和应用 Markdown 变得非常简单和高效

增加款式主题

以下残缺的款式主题能够拷贝至我的项目当中

预览款式

Github-Markdown-Css款式下载

相干的插件或者框架

  • VuePress: 一个为 Vue.js 开发者打造的动态网站生成器，非常适合用来构建文档网站。它内置了 Markdown 到 Vue 的转换性能，这个也写过，总感觉款式差了那么丢丢
  • VitePress: 相似于 VuePress，然而基于 Vite。它是一个更现代化的抉择，提供了更快的开发体验和更好的性能，这个我用过还不错，点击体验

源码地址，我稍后上传，家里墙的软件失败了 ，代码上传好慢