„Vue“ vadovas — Lily Design System

Ką sukursite

Nedidelė kontaktų forma — laukas su žyma, siuntimo mygtukas, v-model susiejimas, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git, Node 22 ar naujesnės ir pnpm 10 ar naujesnio. Tinka bet kuris „Vue 3“ projektas — „Nuxt“, „Vite“ arba paprastas „Vue“.

1 žingsnis — Gaukite kodą

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

Komponentai yra plokščios bylos aplanke components/ — Button.vue, TextInput.vue — kiekvienas su savo testu, story ir dokumentacija šalia. Nukopijuokite reikalingas bylas arba pasiimkite saugyklą.

2 žingsnis — Jūsų pirmasis komponentas

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

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

Atvaizduoja <button class="button" type="button">. Propai atitinka kitas sistemas: type, disabled, pressed, label, plius atributų praleidimas visam kitam.

3 žingsnis — Sudėkite nedidelę formą

<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 priima matomą label kaip savo prop vietoj įdėto žymos komponento — perduokite ją vieną kartą, prie Fieldir TextInputiš label suteikia prieinamą pavadinimą.

Patikrinta 2026-08-29: ankstesnis juodraštis įdėjo atskirą Label viduje Field, todėl buvo atvaizduotos dvi žymos (viena tuščia), nes Field jau pats atvaizduoja savo iš label prop — pastebėta sukompiliavus tikslų fragmentą. Maršrutas Sudėtinis kontaktų formos maršrutas yra tas pats šablonas, išbandytas tikrais e2e ir axe testais.

TextInput naudoja defineModel, todėl paprastas v-model veikia iš karto.

Patikrinkite savo darbą: paleiskite programą ir forma atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žyma paskelbiama, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Apipavidalinkite klasių kablius — .button, .text-input, .label, .field — savo stilių lentelėje arba susiekite paruoštą temą faile index.html / nuxt.config:

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

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„Nuxt“ pavyzdinė programa yra visas katalogas apipavidalintas ir pademonstruotas, su „Playwright“ e2e ir axe-core pradine riba:

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

Tolesni žingsniai

Temos — perjungimas vykdymo metu su „Vue“ pagalbininku theme-picker.
Nuostatų pagalbininkai — kalba ir teksto dydis.
Komponentų katalogas — savybės, ARIA ir klaviatūra kiekvienam komponentui.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.