Vue õpetus — Lily Design System

Mida sa ehitad

Väike kontaktivorm — sildiga väli, saatmisnupp, v-model sidumine, tõeline klaviatuuri- ja ekraanilugeja käitumine — esmalt paljas, seejärel kujundatud, umbes 10 minutiga.

Enne alustamist

Vaja on gitti, Node 22 või uuemat ja pnpm 10 või uuemat. Sobib iga Vue 3 projekt — Nuxt, Vite või lihtne Vue.

Samm 1 — Hangi kood

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

Komponendid on lamedad failid kaustas components/ — Button.vue, TextInput.vue — igaühel oma test, story ja dokumentatsioon kõrval. Kopeeri vajalikud failid või too repo kaasa.

Samm 2 — Sinu esimene komponent

<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<template>
  <Button @click="save">Save</Button>
</template>

Renderdab <button class="button" type="button">. Propid vastavad teistele raamistikele: type, disabled, pressed, label, pluss atribuutide läbilaskmine kõige muu jaoks.

Samm 3 — Kombineeri väike vorm

<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 võtab nähtava label oma propina pesastatud sildikomponendi asemel — anna see üks kord edasi, elemendile Fieldja TextInputelemendist label annab ligipääsetava nime.

Kontrollitud 2026-08-29: varasem mustand pesastas eraldi Label sees Field, mis renderdab kaks silti (üks tühi), sest Field renderdab juba oma sildi label prop — avastatud täpse koodilõigu kompileerimisel. Marsruut Koostatud kontaktivormi marsruut on sama muster, proovitud päris e2e- ja axe-testidega.

TextInput kasutab defineModel, seega lihtne v-model töötab karbist välja.

Kontrolli oma tööd: käivita rakendus ja vorm paistab paljas — täpselt nagu ette nähtud: kujundamine on alles ees. Vajuta Tab: fookus liigub läbi iga juhtelemendi, silt kuulutatakse ette ja saatmine töötab. Käitumine on valmis; välimus on sinu ja järgmine samm.

Samm 4 — Kujunda see

Kujunda klassikonksud — .button, .text-input, .label, .field — oma laadilehes või lingi valmis teema failis index.html / nuxt.config:

<link rel="stylesheet" href="/themes/nord.css" />

Samm 5 — Vaata kõike töötamas

Nuxti näiterakendus on kogu kataloog kujundatuna ja demonstreeritult, Playwright e2e ja axe-core baasjoonega:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

Järgmised sammud

Teemad — vahetamine töö ajal Vue theme-picker abiga.
Eelistuste abilised — keel ja teksti suurus.
Komponentide kataloog — omadused, ARIA ja klaviatuur komponendi kohta.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.