إنشاء وتشغيل مشروع Vue.js

ماهو Vue.js؟

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

الميزات الرئيسية ومزايا Vue 3

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

باستخدام Vue 3، يمكن للمطورين بناء تطبيقات ويب حديثة وتفاعلية بكفاءة أعلى.

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

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

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

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

   أولًا، تأكد من تثبيت بيئة Node.js المقدمة من ServBay. ثم استخدم الأمر التالي لتهيئة مشروع Vue 3 جديد:

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

   اتبع التعليمات وأدخل اسم المشروع (يفضل تسميته servbay-vue-app)، واختر الخيارات الأخرى حسب الحاجة:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

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

   انتقل إلى دليل المشروع وثبت الاعتماديات:

   cd servbay-vue-app
   npm install

تعديل محتوى مشروع Vue

1. تعديل ملف src/App.vue

   افتح ملف src/App.vue وعدّل المحتوى ليعرض "Hello ServBay!" في صفحة الويب:

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

الدخول إلى وضع التطوير

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

   شغّل خادم التطوير وحدّد المنفذ (مثلاً: 8585):

   npm run dev -- --port 8585

   هذا سيقوم بتشغيل خادم التطوير محليًا ويعرضه على المنفذ 8585.

2. تكوين الوكيل العكسي في ServBay

   استخدم ميزة "المضيف" في ServBay للوصول إلى خادم التطوير من خلال الوكيل العكسي. في إعدادات "المضيف" في ServBay، أضف وكيل عكسي جديد:

   • الاسم: My first Vue dev site
   • اسم النطاق: servbay-vue-test.dev
   • نوع المضيف: وكيل عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

   اتبع خطوات الإعداد التفصيلية في إضافة موقع تطوير Nodejs.

3. الوصول إلى وضع التطوير

   افتح المتصفح واذهب إلى https://servbay-vue-test.dev لمشاهدة المشروع في الوقت الحقيقي. بما أن ServBay يدعم أسماء النطاق المخصصة وشهادات SSL المجانية، ستحصل على أمان أعلى.

بناء النسخة الانتاجية

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

   عند الانتهاء من التطوير، استخدم الأمر التالي لبناء النسخة النهائية:

   npm run build

   بعد الانتهاء من البناء، ستكون الملفات الثابتة في دليل dist.

2. إعداد خدمة الملفات الثابتة

   استخدم ميزة "المضيف" في ServBay للوصول إلى النسخة النهائية من خلال خدمة الملفات الثابتة. في إعدادات "المضيف" في ServBay، أضف موقع ويب ثابت جديد:

   • الاسم: My first Vue production site
   • اسم النطاق: servbay-vue-test.prod
   • نوع المضيف: ثابت
   • دليل جذر الموقع: /Applications/ServBay/www/servbay-vue-app/dist

3. الوصول إلى النسخة الانتاجية

   افتح المتصفح واذهب إلى https://servbay-vue-test.prod لمشاهدة النسخة النهائية. باستخدام أسماء النطاق المخصصة وشهادات SSL المجانية من ServBay، سيحصل موقعك على أمان ومصداقية أعلى.

بهذه الخطوات، نكون قد أنشأنا وشغلنا مشروع Vue 3، واستخدمنا ميزة ServBay لإدارة والوصول إلى المشروع.