sakai vue cli

قالب إدارة Sakai لـ Vue

المعاينة المباشرة

قم بزيارة موقع Sakai Vue الإلكتروني للحصول على معاينة مباشرة.

ابدء

Sakai هو قالب تطبيق لـ Vue يعتمد على Vue CLI الذي يوفر أدوات قياسية جاهزة لمشاريع Vue. للبدء، انسخ هذا المستودع من GitHub وقم بتثبيت التبعيات باستخدام npm أو الغزل.

 npm install

أو

 yarn

الخطوة التالية هي تشغيل التطبيق باستخدام البرنامج النصي للخدمة والانتقال إلى http://localhost:8080/ لعرض التطبيق. هذا كل شيء، يمكنك الآن البدء في تطوير التطبيق الخاص بك باستخدام قالب Sakai.

 npm run serve

البرامج النصية Vue CLI

الأوامر التالية مشتقة من create-app-app.

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

بناء

يتكون ساكاي من جزأين رئيسيين؛ تخطيط التطبيق والموارد. App.vue داخل مجلد src هو المكون الرئيسي الذي يحتوي على قالب التخطيط الأساسي بينما يتم وضع الموارد المطلوبة مثل بنية SASS للتخطيط داخل مجلد src/assets/ .

مكونات التخطيط

التخطيط الرئيسي هو قالب App.vue ، وهو مقسم إلى مكونين فرعيين مثل الشريط العلوي والقائمة والتذييل. فيما يلي قالب لمكون App.vue الذي ينفذ المنطق مثل حالة القائمة وأوضاع التخطيط وما إلى ذلك.

قائمة طعام

القائمة عبارة عن مكون منفصل محدد في ملف AppMenu.vue استنادًا إلى PrimeVue MenuModel API. من أجل تحديد عناصر القائمة، انتقل إلى قسم البيانات في ملف App.vue وحدد النموذج الخاص بك كبنية متداخلة باستخدام خاصية القائمة .

التبعيات

تبعيات Sakai مدرجة أدناه ويجب إضافتها إلى package.json.

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

موضوع PrimeVue

يستخدم Sakai سمات Saga وArya وVela المجانية التي يتم توزيعها داخل PrimeVue، ومع ذلك يمكن استخدامها مع أي سمة PrimeVue بالإضافة إلى المواد والرياح الخلفية والتمهيد حيث أن ألوان التخطيط مشتقة من السمة المستخدمة عبر متغيرات CSS.

متغيرات ساس

في حالة رغبتك في تخصيص متغيرات التخطيط، افتح ملف _variables.scss ضمن مجلد src/layout. القائمة قصيرة جدًا نظرًا لأن غالبية المتغيرات مستمدة من سمة PrimeVue المستخدمة.

src/assets/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;