uniplatforms-ui

Vue 3 + TypeScript + Vue Router + Vue I18n + TailwindCSS + Axios + Lucide + Naive UI uchun tayyor proyekt shabloni. NPM orqali o'rnatib, bir buyruq bilan yangi loyiha yaratish mumkin.

Tarkibi

• Vue 3 (<script setup>, Composition API)
• TypeScript
• Vue Router 4
• Vue I18n (uz / ru / en tillari tayyor)
• TailwindCSS (global rang o'zgaruvchilar bilan)
• Axios (interceptor bilan tayyor instansiya)
• lucide-vue-next (icon library)
• Naive UI (component library, global theme bilan sozlangan)
• Pinia (state management, tayyor ulangan)
• Tayyor AppButton va AppIconButton componentlari

Lokal test qilish (nashr qilishdan oldin)

cd uniplatforms-ui
npm install
npm link

Boshqa papkada:

npx uniplatforms-ui my-app
# yoki: uniplatforms-ui my-app (agar npm link qilingan bo'lsa)
cd my-app
npm install
npm run dev

NPM ga nashr qilish

1. npmjs.com da account oching (agar yo'q bo'lsa).

2. Terminalda: npm login

3. package.json dagi name maydonini o'zingiz xohlagan unique nomga o'zgartiring (masalan create-username-vue-template), chunki uniplatforms-ui nomi band bo'lishi mumkin.

4. Nashr qilish:

   npm publish --access public

5. Shundan so'ng har kim quyidagicha ishlatishi mumkin:

   npx create-username-vue-template my-app

Ranglarni global o'zgartirish

Barcha ranglar ikkita joyda markazlashgan:

• template/src/assets/styles/main.css — Tailwind uchun CSS o'zgaruvchilar (--color-primary, va h.k.)
• template/src/config/theme.ts — Naive UI componentlari uchun theme overrides

Shu ikki faylni birga o'zgartirsangiz, butun loyihadagi barcha ranglar (Tailwind klasslari va Naive UI componentlari) mos ravishda yangilanadi.

Tayyor "u-" componentlar (global, import shart emas)

Barcha UI componentlar main.ts da global ro'yxatdan o'tkazilgan (app.use(UiComponents)), shuning uchun har qanday .vue faylda import qilmasdan to'g'ridan-to'g'ri ishlatishingiz mumkin:

<template>
  <u-form ref="formRef" :model="form" :rules="rules">
    <u-form-item label="Ism" path="name">
      <u-input v-model="form.name" placeholder="Ismingiz" />
    </u-form-item>

    <u-form-item label="Shahar" path="city">
      <u-select v-model="form.city" :options="cityOptions" />
    </u-form-item>

    <u-checkbox v-model="form.agree">Roziman</u-checkbox>

    <u-button variant="primary" @click="submit">Yuborish</u-button>
  </u-form>
</template>

Mavjud componentlar:

| Tag | Nima uchun | |---|---| | <u-button> | Tugma (variant: primary/secondary/success/warning/danger/ghost, icon, loading, disabled) | | <u-icon-button> | Aylana ikon-tugma, tooltip bilan | | <u-input> | Matn/parol input | | <u-textarea> | Ko'p qatorli matn maydoni | | <u-select> | Dropdown tanlov | | <u-checkbox> | Checkbox | | <u-card> | Karta konteyner (title, header/footer slotlari) | | <u-form> / <u-form-item> | Validatsiyali forma (ref orqali .validate() chaqiriladi) |

Componentlarning haqiqiy kodi template/src/components/ui/ papkasida (masalan UButton.vue, UInput.vue). Global ro'yxatdan o'tkazish template/src/components/ui/index.ts faylida, TypeScript IntelliSense uchun esa template/src/components.d.ts faylida yozilgan.

Yangi component qo'shmoqchi bo'lsangiz: components/ui/ ga yangi .vue fayl qo'shing, components/ui/index.ts va components.d.ts ga qo'shib qo'ying — shundan keyin u ham global <u-...> sifatida ishlaydi. To'liq namuna src/views/HomeView.vue da.

Proyekt tuzilishi (yaratilgandan keyin)

my-app/
├── src/
│   ├── api/axios.ts          # Axios instansiyasi
│   ├── components/ui/        # AppButton, AppIconButton
│   ├── config/theme.ts       # Naive UI global theme
│   ├── i18n/                 # vue-i18n sozlamalari va tillar
│   ├── layouts/               # DefaultLayout
│   ├── router/                # vue-router sozlamalari
│   ├── views/                 # Home, About, NotFound
│   ├── assets/styles/main.css # Tailwind + global CSS ranglar
│   ├── App.vue
│   └── main.ts
├── tailwind.config.js
├── vite.config.ts
└── package.json