البدء السريع

إنشاء مشروع Vue 3

# إنشاء مشروع Vite باستخدام pnpm
pnpm create vite my-app --template vue-ts
cd my-app

تثبيت @lh-ui/vue3

pnpm add @lh-ui/vue3

الاستيراد الكامل (main.ts)

import { createApp } from 'vue'
import App from './App.vue'
import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

const app = createApp(App)
app.use(LhUiPlus)
app.mount('#app')

استخدام المكوّنات

<script setup lang="ts">
</script>

<template>
  <div>
    <LhButton type="primary">الزر الرئيسي</LhButton>
    <LhButton type="success">زر النجاح</LhButton>
    <LhButton type="warning">زر التحذير</LhButton>
    <LhButton type="danger">زر الخطر</LhButton>
    <LhButton type="info">زر المعلومات</LhButton>
  </div>
</template>

الإعداد العام والسمات

يوفر LhConfigProvider الإعداد العام (اللغة والحجم) ومتغيرات السمة (themeVars)، ويمرَّر كل منها كخاصية مستقلة:

<script setup lang="ts">
import { zhCN } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider
    :locale="zhCN"
    size="medium"
    :theme-vars="{ 'primary-color': '#5B8C5A' }"
  >
    <LhButton type="primary">زر بالنمط الصيني</LhButton>
  </LhConfigProvider>
</template>

• locale: حزمة اللغة، تُستورد بالاسم من مسار جذر الحزمة (zhCN / enUS).
• size: الحجم العام، والخيارات small / medium / large / mini.
• themeVars: متغيرات السمة، ويمكن حذف البادئة --lh- من أسماء المفاتيح. ويمكن تبديل السمات المسبقة بنقرة واحدة عبر useLhPresetTheme، التفاصيل في السمات المسبقة.

مثال تفاعلي

يعرض ما يلي الاستخدام الأساسي لـ lh-ui-plus: