# 快速开始

在 Vue 页面显示第一段 Markdown，理解正文、主题和保存的分工。

这一页在 Vue 页面中显示一段 Markdown。你提供原文字符串，`QuireMarkdown` 把标题、段落和格式显示出来；保存时仍然保存原文，不需要保存组件生成的 HTML。

`@quirekit/incremark/vue` 提供阅读组件。React 使用[独立接入页](/guide/react)，只解析数据而不显示界面时使用 `@quirekit/incremark-core`。当前 API 为实验版本，安装方式见下方工作区说明。

## 1. 传入一段 Markdown

```vue
<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 应用，公共包均从工作区链接：

```bash
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` 使用组件库预设，它包含正文与组件的样式清单：

```ts
import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'
export default defineQuireKitUnoConfig()
```

在 Vite 注册 Vue 与 UnoCSS 插件：

```ts
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` 只提供示例的语言类型。先查看单个组件即可理解接入，之后再按需要增加流式更新或自定义渲染。

### reading/basic.vue

```vue
<script setup lang="ts">
import { computed } from "vue";
import { QuireMarkdown } from "@quirekit/incremark/vue";
import "@quirekit/incremark/styles.css";
import type { ExampleLocale } from "../shared/types";
const props = withDefaults(defineProps<{ /** Tutorial language. */ locale?: ExampleLocale }>(), { locale: "zh-CN" });
const source = computed(() => props.locale === "zh-CN" ? "## 你好，Markdown\n\n正文支持 **强调**、`代码` 和[链接](https://example.com)。"
  : "## Hello, Markdown\n\nRender **emphasis**, `code` and [links](https://example.com).");
</script>
<template><div class="p-qk-surface"><QuireMarkdown :content="source" :locale="locale" /></div></template>

```

### shared/types.ts

```ts
/** Example host language; independent of the documentation router. */
export type ExampleLocale = "zh-CN" | "en";

```

下一步：[流式接入](/guide/streaming)、[语法范围](/guide/syntax)、[Playground](/playground)。