ບົດສອນ Vue

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແບບຟອມຕິດຕໍ່ນ້ອຍໆ — ຊ່ອງປ້ອນທີ່ມີປ້າຍ, ປຸ່ມສົ່ງ, 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 ໃຫ້ຊື່ທີ່ເຂົ້າເຖິງໄດ້.

TextInput ໃຊ້ defineModel, ສະນັ້ນທຳມະດາ v-model ເຮັດວຽກທັນທີ.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ໃສ່ຮູບແບບ class hook — .button, .text-input, .label, .field — ໃນ stylesheet ຂອງທ່ານ, ຫຼືເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບໃນ index.html / nuxt.config:

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

ຂັ້ນຕອນ 5 — ເບິ່ງທຸກຢ່າງເຮັດວຽກ

ແອັບຕົວຢ່າງ Nuxt ແມ່ນແຄັດຕາລັອກເຕັມທີ່ມີຮູບແບບ ແລະສາທິດ, ພ້ອມ Playwright e2e ແລະ axe-core baseline:

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

ຂັ້ນຕອນຕໍ່ໄປ

• ຮູບແບບສີສັນ — ການສະຫຼັບຕອນແລ່ນດ້ວຍຕົວຊ່ວຍ Vue theme-picker.
• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ພາສາ ແລະຂະໜາດຕົວອັກສອນ.
• ແຄັດຕາລັອກອົງປະກອບ — ຄຸນສົມບັດ, ARIA ແລະແປ້ນພິມຕໍ່ອົງປະກອບ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.