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

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

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

ما هو Vue.js؟

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

أبرز ميزات ومزايا Vue 3

• API التركيبي (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 كبيئة تطوير محلية على جهازك.
2. تثبيت حزمة Node.js: استخدم ميزة إدارة الحزم في ServBay لتثبيت Node.js. للاطلاع على خطوات مفصلة، انظر تثبيت واستخدام Node.js مع ServBay.

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

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

   أولاً، افتح تطبيق الطرفية (Terminal). توصي ServBay بتخزين مشاريع المواقع ضمن دليلها الافتراضي. انتقل إلى هذا الدليل وابدأ مشروع Vue جديد عبر الأمر npm create vue@latest. يضمن خيار @latest حصولك على أحدث نسخة من أدوات Vue CLI أو create-vue، والتي تستخدم عادة لبدء مشروع بVue 3.

   macOS:

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

   Windows:

   cd C:\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) وشغل الأمر npm install لتثبيت جميع الحزم والاعتمادات المطلوبة.

   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. تشغيل خادم التطوير

   في جذر المشروع، شغل الأمر التالي لتشغيل خادم التطوير. استخدم خاصية --port لتحديد المنفذ (مثلاً: 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، راجع إضافة موقع تطوير 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 تفضله)
   • نوع الموقع: ثابت
   • مجلد الجذر للموقع: اختر المسار المطلق لمجلد dist الذي أنشئ بعد البناء:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   بعد الحفظ، سيقوم ServBay بضبط إعدادات خادم الويب لتقديم محتويات مجلد dist مباشرة كملفات ثابتة.

3. الدخول إلى وضع الإنتاج

   تأكد من تشغيل خادم الويب في ServBay. افتح المتصفح وزر النطاق الذي ضبطته للبناء النهائي https://servbay-vue-prod.servbay.demo.

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

نقاط هامة

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

الخلاصة

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