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