Vue 教程
Vue 3 单文件组件，带类型的 props、用 defineModel 实现的双向绑定，以及 v-bind="$attrs" 透传。
你将构建什么
一个小型联系表单——带标签的输入框、提交按钮、v-model
绑定，以及真实的键盘和屏幕阅读器行为——先是不带样式的版本，再加上样式，大约 10 分钟完成。
开始之前
你需要 git、Node 22 或更高版本，以及 pnpm 10 或更高版本。任何 Vue 3 项目都可以——Nuxt、Vite 或纯 Vue。
第 1 步——获取代码
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-headless
pnpm install
pnpm test # vitest + @testing-library/vue
pnpm run storybook # browse all 571 components
组件是 components/ 中的扁平文件——
Button.vue、TextInput.vue——每个文件旁边都有它的测试、story 和文档。把你需要的文件复制过去，或者把该仓库纳入自己的代码库。
第 2 步——你的第一个组件
<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>
<template>
<Button @click="save">Save</Button>
</template>
渲染为 <button class="button" type="button">。props 与其他框架保持一致：type、disabled、
pressed、label，其余一切都通过属性透传。
第 3 步——组合一个小表单
<script setup>
import { ref } from "vue";
import Form from ".../components/Form.vue";
import Field from ".../components/Field.vue";
import TextInput from ".../components/TextInput.vue";
import Button from ".../components/Button.vue";
const name = ref("");
</script>
<template>
<Form @submit="handleSubmit">
<Field label="Full name" required>
<TextInput id="name" label="Full name" v-model="name" required />
</Field>
<Button type="submit">Save</Button>
</Form>
</template>
Field 把可见的 label 作为自己的 prop，而不是嵌套一个标签组件——只需在
Field 上传入一次，TextInput 对应的
label 就会提供可访问名称。
2026-08-29 已验证：早期草稿在 Field 里嵌套了单独的 Label，结果渲染出两个标签（其中一个为空），因为 Field 已经会根据 label prop 渲染自己的标签——这是通过编译这段代码发现的。
联系表单组合路由
采用同样的模式，并经过真实的端到端测试和 axe 测试。
TextInput 使用 defineModel，所以普通的
v-model 开箱即用。
检查你的成果：运行应用，表单看起来很朴素——这正是预期：样式还在后面。按下 Tab：焦点会依次经过每个控件，标签会被朗读，提交也能正常工作。行为已经完成；外观由你决定，这就是下一步。
第 4 步——添加样式
在你的样式表中为这些类名钩子设置样式——.button、.text-input、
.label、.field——或者在 index.html / nuxt.config 中链接一个现成的主题：
<link rel="stylesheet" href="/themes/nord.css" />第 5 步——看看它的完整效果
Nuxt 示例应用是完整目录的带样式演示版本，带有 Playwright 端到端测试和 axe-core 基线：
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev