Vue 教學
附型別屬性嘅 Vue 3 單檔案元件、 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 同文件。複製你需要嘅檔案,或者 vendor 倉庫。
步驟 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">。屬性同其他框架一致: 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 當作佢自己嘅屬性,而唔係嵌套嘅標籤元件 — 傳入一次,喺
Field,同 TextInput喺
label 提供無障礙名稱。
2026-08-29 已驗證: 較早嘅草稿喺 Label 入面嘅 Field元件,令佢渲染咗
兩個 標籤(其中一個係空嘅),因為 Field 已經由 label 屬性 — 編譯準確片段先發現。
組合聯絡表單路由
係同一個模式,由真實嘅 e2e 同 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 e2e 同 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