Lily Design System™

Vue apmācība

Vue 3 vienas datnes komponentes ar tipizētiem props, defineModel divvirzienu saistīšana un v-bind="$attrs" caurlaide.

Ko jūs izveidosiet

Neliela kontaktu veidlapa — lauks ar iezīmi, iesniegšanas poga, v-model saistīšana, īsta tastatūras un ekrāna lasītāja darbība — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams git, Node 22 vai jaunāks un pnpm 10 vai jaunāks. Der jebkurš Vue 3 projekts — Nuxt, Vite vai tīrs Vue.

1. solis — Iegūstiet kodu

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

Komponentes ir plakanas datnes direktorijā components/ — Button.vue, TextInput.vue — katra ar savu testu, story un dokumentāciju blakus. Nokopējiet vajadzīgās datnes vai ievelciet repozitoriju.

2. solis — Jūsu pirmā komponente

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

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

Attēlo <button class="button" type="button">. Props atbilst citiem ietvariem: type, disabled, pressed, label, plus atribūtu caurlaide visam pārējam.

3. solis — Salieciet nelielu veidlapu

<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 pieņem redzamo label kā savu propu, nevis iekļautu iezīmes komponenti — nododiet to vienreiz, pie Fieldun TextInputno label nodrošina pieejamo nosaukumu.

Pārbaudīts 2026-08-29: agrāks melnraksts iekļāva atsevišķu Label iekšā Field, kas attēloja divas iezīmes (vienu tukšu), jo Field jau pati attēlo savu no label prop — atklāts, kompilējot precīzo fragmentu. Maršruts Salikto kontaktu veidlapas maršrutu ir tas pats modelis, pārbaudīts ar īstiem e2e un axe testiem.

TextInput izmanto defineModel, tāpēc vienkāršs v-model darbojas uzreiz.

Pārbaudiet savu darbu: palaidiet lietotni, un veidlapa izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīme tiek paziņota, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Noformējiet klases āķus — .button, .text-input, .label, .field — savā stilu lapā vai saistiet gatavu motīvu failā index.html / nuxt.config: 

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

5. solis — Redziet, kā viss darbojas

Nuxt paraugu lietotne ir viss katalogs noformēts un demonstrēts, ar Playwright e2e un axe-core bāzlīniju: 

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

Nākamie soļi

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.