这一章先做一件事：在 Vue 页面中放入能输入、选择和撤销的编辑器。先用浏览器原生 DOM 视图理解 Core 的用法，后面的章节再加入 Canvas、分页和产品界面。
你需要了解 Vue 的组件和生命周期，并准备 Node.js 与 pnpm。已有 Vue 3 项目可以直接从安装依赖开始。
1. 准备 Vue 项目
pnpm create vite my-editor --template vue-ts
cd my-editor
pnpm install
pnpm add @quirekit/core@alpha @quirekit/starter-kit@alpha @quirekit/dom-view@alpha @quirekit/pm-view@alpha
这几个包各负责一件事：core 管理文档和命令，starter-kit 提供段落、标题、粗体等常用能力，dom-view 把文档显示为可编辑的 DOM。pm-view 的基础样式保留正文空白和原生选区的显示方式。QuireKit 包应使用同一发布批次。
2. 创建编辑器组件
新建 src/Editor.vue。Vue 负责提供一个空元素；Editor 在组件挂载后接管这个元素中的编辑内容。
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Editor } from '@quirekit/core'
import { StarterKit } from '@quirekit/starter-kit'
import { DomViewExtension } from '@quirekit/dom-view'
import '@quirekit/pm-view/style/prosemirror.css'
const element = ref<HTMLElement>()
let editor: Editor | undefined
onMounted(() => {
editor = new Editor({
element: element.value,
mode: 'dom',
extensions: [StarterKit, DomViewExtension],
content: '<p>我的第一个 QuireKit 编辑器。</p>',
})
})
onBeforeUnmount(() => editor?.destroy())
</script>
<template><div ref="element" /></template>
element 指定显示位置，extensions 决定可以编辑哪些内容，content 是初始正文。mode: 'dom' 选择刚安装的 DOM 视图。创建一次即可，文字输入时不需要重新创建 Editor。
onMounted 保证挂载元素已经存在；destroy() 释放编辑视图和监听器。因此这段组件也可以放在带 SSR 的应用中：服务端只渲染外层元素，编辑器在浏览器中创建。
3. 放到页面里
在 src/App.vue 中导入并使用组件，然后运行 pnpm dev。
<script setup lang="ts">
import Editor from './Editor.vue'
</script>
<template><Editor /></template>
你应该能点击正文输入，拖动选择文字，并通过系统快捷键撤销。下面运行的是同样的接入方式，可以直接试用；源码只有一个组件文件。
接下来增加什么
现在有了编辑器的骨架，但还没有工具栏和分页工作区。下一章先解释文档模型：为什么正文要存成结构化数据，以及普通文章和 Word 文档为什么需要不同的扩展。随后挂载 View会把 DOM 视图换成 Canvas/SVG。
如果你已经熟悉这些基础，可以直接查阅完整工作区示例。它包含文件操作和状态管理，每个文件的用途在该页单独说明。