إنشاء وتشغيل مشروع Vue.js على macOS باستخدام ServBay

يُعد Vue.js إطار عمل JavaScript تقدميًا شائعًا لبناء واجهات المستخدم. يتميز بسهولة البدء به، ومرونته، وأدائه العالي، خاصة لبناء تطبيقات الصفحة الواحدة (SPA). يوفر ServBay كبيئة تطوير ويب محلية قوية دعمًا سهلاً لـ Node.js، مما يجعله منصة مثالية لتطوير مشاريع Vue.js على macOS.

سيُوضح هذا الدليل بالتفصيل كيفية استخدام البيئة المتكاملة التي يوفرها ServBay لإنشاء مشروع Vue.js من الصفر، والوصول إليه عبر ServBay في وضعي التطوير والإنتاج.

ما هو Vue.js؟

Vue.js هو إطار عمل JavaScript تقدمي لبناء واجهات المستخدم. بخلاف الأطر الكبيرة الأخرى، يعتمد Vue على فلسفة التطوير التصاعدي، حيث يُركز نواة الإطار على طبقة العرض فقط، مما يجعله سهل التعلم ويسهل دمجه مع مكتبات الطرف الثالث أو المشاريع القائمة. الإصدار الأحدث هو Vue 3، الذي يقدم ميزات وتحسينات جديدة عديدة، مثل أداء أسرع، حجم أصغر، ودعم محسّن لـ TypeScript.

أبرز ميزات وفوائد Vue 3

• واجهة برمجة تركيبة (Composition API): تنظيم الكود المنطقي عبر دوال التجميع، مما يجعل صيانة وإعادة استخدام الشيفرة في المكونات الكبيرة أسهل بكثير.
• تعزيز الأداء: يستخدم Vue 3 كائن Proxy لأنظمة الاستجابة وتحسين خوارزميات DOM الافتراضية، ما أدى إلى زيادة كبيرة في الأداء.
• حجم أصغر للمكتبة: بفضل تقنية Tree-shaking، أصبح حجم نواة Vue 3 أقل، مع سرعة تحميل أفضل.
• دعم أفضل لـ TypeScript: يوفر Vue 3 تعريفات نوعية مُحسّنة، مما يجعل تطوير تطبيقات Vue باستخدام TypeScript أكثر قوة.
• تحسين دورة حياة المكون: توفر الدوال والهوكات الجديدة لدورة حياة المكونات، إلى جانب دالة Setup مرونة أكبر وتنظيماً أوضح للمنطق البرمجي.

هذه الميزات تجعل من Vue 3 الخيار الأمثل للمطورين لبناء تطبيقات ويب عصرية وسريعة الاستجابة بكفاءة عالية.

إنشاء وتشغيل مشروع Vue.js باستخدام بيئة ServBay المتكاملة

في هذا الدليل سنستخدم بيئة Node.js المدمجة في ServBay لإنشاء وتشغيل مشروع Vue.js. كما سنستفيد من ميزة المواقع في ServBay لضبط خادم الويب، بالإضافة إلى إعدادات الوكيل العكسي وخدمة الملفات الساكنة للوصول المحلي للمشروع.

المتطلبات المسبقة

قبل البدء، تأكد من إتمام الخطوات التالية:

1. تثبيت ServBay: يجب أن يكون ServBay مثبتًا بشكل صحيح على جهازك بنظام macOS.
2. تثبيت حزمة Node.js: عبر مدير الحزم في ServBay، قم بتثبيت حزمة Node.js. لمعلومات مفصلة راجع تثبيت واستخدام Node.js في ServBay.

إنشاء مشروع Vue.js

1. تهيئة المشروع

   أولاً، افتح تطبيق الطرفية. يُوصى بوضع مشاريع المواقع ضمن دليل /Applications/ServBay/www. انتقل إلى هذا المسار واستخدم أمر npm create vue@latest لتهيئة مشروع Vue.js جديد. يضمن الوسم @latest استخدامك لأحدث نسخة من أدوات Vue CLI أو create-vue، مما يؤدي عادة لإنشاء مشروع Vue 3.

   cd /Applications/ServBay/www
   npm create vue@latest

   اتبع التعليمات الظاهرة لتسمية مشروعك (ينصح بتسميته servbay-vue-app) وحدد الخيارات المطلوبة مثل TypeScript، Vue Router، Pinia وغيرها حسب احتياجك. مثال على الإعدادات:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # اختر Yes أو No حسب الحاجة
   ✔ Add JSX Support? … No # اختر Yes أو No حسب الحاجة
   ✔ Add Vue Router for Single Page Application development? … Yes # ينصح باختيار Yes
   ✔ Add Pinia for state management? … No # اختر Yes أو No حسب الحاجة
   ✔ Add Vitest for Unit testing? … No # اختر Yes أو No حسب الحاجة
   ✔ Add an End-to-End Testing Solution? … No # اختر Yes أو No حسب الحاجة
   ✔ Add ESLint for code quality? … Yes # ينصح باختيار Yes
   ✔ Add Prettier for code formatting? … Yes # ينصح باختيار Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # اختر Yes أو No حسب الحاجة

2. تثبيت التبعيات

   بعد اكتمال تهيئة المشروع، ادخل مجلد المشروع الجديد servbay-vue-app، ثم نفّذ أمر تثبيت كافة الحزم المطلوبة:

   cd servbay-vue-app
   npm install

تعديل مثال محتوى المشروع (اختياري)

للتأكد من نجاح تشغيل المشروع، يمكنك تعديل ملف src/App.vue واستبدال محتواه لعرض رسالة "Hello ServBay!".

افتح ملف src/App.vue داخل مشروعك وعدّل محتواه إلى:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>هذا تطبيق Vue.js يعمل عبر ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ضبط بيئة التطوير (باستخدام الوكيل العكسي)

عادةً عند التطوير، يشغّل مشروع Vue خادم تطوير محلي (عادةً مبني على Vite أو Webpack) يوفر حمولات ساخنة (HMR). يمكنك ربط نطاق محلي بعنوان هذا الخادم عبر الوكيل العكسي في ServBay.

1. تشغيل خادم التطوير

   من جذر المشروع، شغّل الخادم بهذه الأوامر، وحدد منفذًا مناسبًا كـ 8585، على أن يكون شاغرًا:

   npm run dev -- --port 8585

   ستظهر رسالة بأن الخادم يعمل على العنوان المطلوب مثل http://localhost:8585.

2. ضبط وكيل عكسي لموقع ServBay

   من واجهة ServBay، اذهب لإعدادات المواقع وأضف موقعًا جديدًا من نوع وكيل عكسي:

   • الاسم: My first Vue dev site (أو اسم مناسب آخر)
   • النطاق: servbay-vue-dev.servbay.demo (أو أي نطاق آخر ينتهي بـ .servbay.demo)
   • نوع الموقع: وكيل عكسي
   • هدف الوكيل IP: 127.0.0.1
   • هدف الوكيل المنفذ: 8585 (نفس المنفذ المعطى لخادم التطوير)

   بمجرد حفظ الإعداد، سيقوم ServBay تلقائيًا بتحديث تهيئة خادم الويب (Caddy أو Nginx) لتمرير طلبات النطاق servbay-vue-dev.servbay.demo إلى http://127.0.0.1:8585.

   لمزيد من التفاصيل، راجع إضافة موقع تطوير Node.js في ServBay.

3. الوصول لطور التطوير

   تأكد من أن خادم الويب الخاص بـ ServBay يعمل. ثم افتح المتصفح وتوجه للنطاق الذي ضبطته: https://servbay-vue-dev.servbay.demo.

   يدعم ServBay تلقائيًا تكوين شهادات SSL للنطاقات المحلية (عبر ServBay User CA أو ServBay Public CA)، مما يسمح لك بالوصول لموقعك المحلي عبر HTTPS بشكل آمن مشابهاً لبيئة الإنتاج. لمزيد من التفاصيل حول SSL، راجع تكوين شهادة SSL في ServBay.

   الآن من المفترض أن ترى تطبيق Vue الخاص بك يعمل بوضع التطوير في المتصفح، مع إمكانية الاستفادة من ميزة التحميل الساخن عند تعديل الكود.

بناء النسخة الإنتاجية وإطلاقها (خدمة الملفات الثابتة)

بعد الانتهاء من تطوير مشروعك على Vue.js والاستعداد لإطلاقه، قم ببناء نسخة إنتاجية محسّنة — عادة ما تكون عبارة عن ملفات ثابتة (HTML, CSS, JavaScript) جاهزة للنشر عبر ServBay.

1. بناء نسخة الإنتاج

   من جذر المشروع، استخدم الأمر التالي لبناء نسخة الإنتاج:

   npm run build

   ستُنشأ جميع الملفات المنتجة وذات الكفاءة العالية في مجلد dist بداخل المشروع افتراضيًا.

2. ضبط خدمة الملفات الثابتة

   من واجهة ServBay، توجه لإعدادات المواقع وأضف موقعًا جديدًا من نوع ثابت:

   • الاسم: My first Vue production site (أو اسم آخر واضح)
   • النطاق: servbay-vue-prod.servbay.demo (أو أي نطاق آخر ينتهي بـ .servbay.demo)
   • نوع الموقع: ثابت
   • دليل الجذر: /Applications/ServBay/www/servbay-vue-app/dist (حدد المسار المطلق لمجلد dist الناتج بعد البناء)

   بعد الحفظ، سيُضبط خادم الويب في ServBay ليخدم محتويات هذا المجلد مباشرة لطلبات هذا النطاق.

3. الوصول لطور الإنتاج

   تأكد من تشغيل خادم الويب، ثم توجه إلى النطاق https://servbay-vue-prod.servbay.demo.

   سترى الآن إصدارًا إنتاجيًا من تطبيقك مبنيًا بشكل أمثل لتحقيق الأداء السريع. بفضل دعم ServBay للنطاقات المخصصة وـ SSL التلقائي يمكنك اختبار موقعك الإنتاجي محليًا بأمان.

ملاحظات هامة

• تعارض المنافذ: إذا كان المنفذ 8585 (أو أي منفذ اخترته) مستخدمًا من برنامج آخر، سيظهر خطأ عند التشغيل. جرب منفذًا فارغًا وعدّل إعدادات الوكيل العكسي في ServBay ليواكب المنفذ الجديد.
• حالة خادم الويب في ServBay: تأكد إن خادم الويب (Caddy أو Nginx حسب إعدادك) يعمل، وإلا لن تتمكن من تصفح المواقع بالنطاقات المعينة.
• حل أسماء النطاقات: يقوم ServBay تلقائيًا بربط نطاقات .servbay.demo المحلية إلى 127.0.0.1. إذا استخدمت نطاقات خارجية، قد تحتاج لتعديل ملف hosts يدويًا أو استعمال مدير Hosts في ServBay لضمان التوجيه الصحيح.

الخلاصة

بفضل ServBay، يمكنك بسهولة إعداد بيئة تطوير محلية على macOS متكاملة مع Node.js، مع إدارة سهلة لكل من مراحل تطوير مشروعك باستخدام Vue.js وإطلاقه للنسخة الإنتاجية. عبر ميزة المواقع في ServBay، يمكنك بسرعة إعداد وكيل عكسي للوصول لخادم التطوير أو خدمة الملفات الثابتة لإطلاق النسخة النهائية مع ميزات النطاق المخصص وSSL التلقائي. هذا يجعل إعداد وإدارة مشاريع Vue.js محليًا أكثر سلاسة واحترافية.