التثبيت

متطلبات البيئة

• Node.js >= 18
• pnpm >= 8

التثبيت

# باستخدام pnpm
pnpm add @lh-ui/vue3

# باستخدام npm
npm install @lh-ui/vue3

# باستخدام yarn
yarn add @lh-ui/vue3

استيراد المكوّنات

الاستيراد الكامل

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')

الاستيراد عند الطلب

استورد المكوّنات بالاسم من مسار جذر الحزمة، واستورد تنسيقات المكوّن المنفصلة بصورة مستقلة (المسار الفرعي للتنسيقات هو @lh-ui/vue3/style/<اسم المكوّن>):

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

<template>
  <LhButton type="primary">زر بالنمط الصيني</LhButton>
</template>

لا يتوفر حاليًا Resolver لـ unplugin-vue-components، ويمكن للاستيراد التلقائي عند الطلب أن يتم يدويًا بأسلوب الاستيراد الموضوح أعلاه للمكوّنات والتنسيقات.

ثمة مساران للتنسيقات متاحان عند الاستيراد عند الطلب:

المسار الفرعي	الوصف
@lh-ui/vue3/style/<اسم المكوّن>	يشير إلى الملف المصدر SCSS، ويتيح تجاوز متغيرات التصميم لتخصيص معمّق، لكنه يتطلب تثبيت sass في المشروع
@lh-ui/vue3/style-css/<اسم المكوّن>	يشير إلى CSS مُجمَّع مسبقًا وقت البناء، جاهز للاستخدام الفوري دون الحاجة إلى sass

// المشروع يتضمن sass وتريد تخصيصًا معمّقًا للسمة
import '@lh-ui/vue3/style/button'

// المشروع لا يتضمن sass، أو لا تحتاج إلى التخصيص
import '@lh-ui/vue3/style-css/button'

الاستيراد عبر CDN

نُشر مُنتَج UMD للحزمة على شبكة CDN عامة، وهو مناسب لصفحات العرض أو الحالات التي لا ترغب فيها باستخدام سلسلة الحزم:

<!-- المكوّنات (تُكشف عموميًا على window.lhUiPlus) -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- أو jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- كامل التنسيقات -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

const app = Vue.createApp({ /* ... */ })
app.use(lhUiPlus)
app.mount('#app')

عند تثبيت الإصدار أضف @<version> بعد اسم الحزمة، مثل https://unpkg.com/@lh-ui/vue3@1.0.0. ويُنصح بتثبيت الإصدار في بيئات الإنتاج لتفادي الترقية غير المتوقعة لمنتجات CDN عند إصدار نسخ جديدة.

التثبيت من خادم خاص

إذا كنت داخل شبكة داخلية، أو كان الوصول إلى npm مقيدًا، أو أردت تثبيت الإصدار على مرآة مستضافة لديك، فيمكنك تثبيت tarball مباشرة من الخادم الخاص بالمؤلف (تفاصيل الاستضافة في دليل النشر):

# pnpm
pnpm add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# npm
npm install https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# yarn
yarn add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

أو اكتبه في package.json:

{
  "dependencies": {
    "@lh-ui/vue3": "https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz"
  }
}

يتجاوز التثبيت عبر tarball تحليل إصدارات registry، لذا يجب استبدال العنوان يدويًا عند الترقية؛ والحزمة بلا اعتمادات تشغيل، وتحتاج فقط إلى تثبيت Vue 3 داخل المشروع.

إذا كنت تفضل تثبيت الحزمة كأي حزمة عادية عبر pnpm add @lhgb/vue3 مع تحليل الإصدارات، فيمكنك استخدام طريقة بيانات registry الخاصة.