这一页在 Vue 页面中显示一段 Markdown。你提供原文字符串,QuireMarkdown 把标题、段落和格式显示出来;保存时仍然保存原文,不需要保存组件生成的 HTML。
@quirekit/incremark/vue 提供阅读组件。React 使用独立接入页,只解析数据而不显示界面时使用 @quirekit/incremark-core。当前 API 为实验版本,安装方式见下方工作区说明。
1. 传入一段 Markdown
<script setup lang="ts">
import { QuireMarkdown } from '@quirekit/incremark/vue'
import '@quirekit/incremark/styles.css'
</script>
<template><QuireMarkdown :content="'# Hello\n\n**Markdown**'" /></template>
content 是要显示的 Markdown,改变它即可更新阅读内容。下面这段原文会显示一个一级标题和一段加粗文字。完整样式与主题配置见下一步。
默认支持 GFM、
脚注、数学、容器、定义列表、Frontmatter 和行内扩展。options.preset: false 只保留
核心 GFM 与显式扩展;新增或覆盖扩展时不要重复安装同名 owner。
2. 安装并准备样式
当前尚未发布到 npm。以下命令用于已有 QuireKit 工作区的 Vue 应用,公共包均从工作区链接:
pnpm add '@quirekit/incremark@workspace:*' '@quirekit/ui@workspace:*' '@quirekit/unocss-preset@workspace:*' vue@^3.5.0 @ark-ui/vue@5.39.1
pnpm add -D unocss @vitejs/plugin-vue vite typescript
在 uno.config.ts 使用组件库预设,它包含正文与组件的样式清单:
import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'
export default defineQuireKitUnoConfig()
在 Vite 注册 Vue 与 UnoCSS 插件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
export default defineConfig({ plugins: [vue(), UnoCSS()] })
应用入口引入 virtual:uno.css 与 @quirekit/incremark/styles.css;后者提供数学等阅读专用样式,不能代替组件库样式。
在 HTML 根节点设 data-qk-theme="precision" data-qk-scheme="light",服务端和客户端保持一致;
已有 QuireKit 应用沿用现有主题。需要局部主题时使用 QuireThemeProvider,交互图标通过
QuireIconProvider 与 quireIconRegistry 提供。
3. 看看实际结果
本站已设置主题与图标。reading/basic.vue 包含传入内容与组件;shared/types.ts 只提供示例的语言类型。先查看单个组件即可理解接入,之后再按需要增加流式更新或自定义渲染。
下一步:流式接入、语法范围、Playground。