开发UI组件库第一步,Vite如何把Markdown转换Vue组件

开发一个 UI 组件库时,将 Markdown 转换成 Vue 组件是一个常见需求,特别是在创建文档或样例展示时,此时我们需要将它转换为组件

我们先看一下

Vue2

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

js 复制代码
 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去做转换,好在有人已经开发好了很多插件,所以只需要我们安装下即可

bash 复制代码
pnpm add vite-plugin-doc-preview
js 复制代码
// vite.config.ts
import { 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 组件来代替默认组件

js 复制代码
app.component('CodePreview', MyCodePreview)

CodePreview 需要按约定支持如下 propsslot

  • props

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

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

自定义组件的列子

html 复制代码
<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。它是一个更现代化的选择,提供了更快的开发体验和更好的性能,这个我用过还不错,点击体验

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

相关推荐
爱吃的强哥7 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安16 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板22 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩23 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真28 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记