Mafunzo ya Vue — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo yenye lebo, kitufe cha kutuma, v-model uunganishaji, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git, Node 22 au zaidi, na pnpm 10 au zaidi. Mradi wowote wa Vue 3 unafaa — Nuxt, Vite, au Vue ya kawaida.

Hatua ya 1 — Pata msimbo

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

Vipengele ni faili tambarare katika components/ — Button.vue, TextInput.vue — kila kimoja kikiwa na jaribio, hadithi, na nyaraka zake kando yake. Nakili faili unazohitaji, au chukua hifadhi.

Hatua ya 2 — Kipengele chako cha kwanza

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

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

Huonyesha <button class="button" type="button">. Sifa zinafanana na mifumo mingine ya kazi: type, disabled, pressed, label, pamoja na upitishaji wa sifa kwa kila kitu kingine.

Hatua ya 3 — Unda fomu ndogo

<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 huchukua label kama sifa yake yenyewe badala ya kipengele cha lebo kilichowekwa ndani — ipitishe mara moja, kwenye Field, na TextInputinayolingana label hutoa jina linalofikika.

Imethibitishwa 2026-08-29: rasimu ya awali iliweka kipengele tofauti cha Label ndani ya Field, ambacho kilionyesha mbili lebo (moja tupu) kwa sababu Field tayari huonyesha lebo yake yenyewe kutoka kwenye label sifa — ilibainika kwa kukusanya kijisehemu halisi. Njia ya Njia ya fomu ya mawasiliano iliyounganishwa ni mchoro uleule, uliojaribiwa kwa majaribio halisi ya e2e na axe.

TextInput hutumia defineModel, hivyo v-model ya kawaida hufanya kazi mara moja.

Hakiki kazi yako: endesha programu na fomu inaonekana ya kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo inatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Pamba vishikio vya darasa — .button, .text-input, .label, .field — katika karatasi yako ya mitindo, au unganisha mandhari yaliyo tayari katika index.html / nuxt.config:

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

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya Nuxt ni orodha kamili yenye mapambo na maonyesho, pamoja na Playwright e2e na msingi wa 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

Hatua zinazofuata

Mandhari — kubadili wakati wa utekelezaji kwa kisaidizi cha theme-picker cha Vue.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.