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

ما هو Nuxt.js؟

Nuxt.js هو إطار عمل مفتوح المصدر يستند إلى Vue.js، يُستخدم لبناء تطبيقات Vue.js بتقديم نقاط تحميل الخوادم. يوفر وظائف غنية مثل العرض من جانب الخادم (SSR)، إنشاء المواقع الثابتة (SSG)، تقسيم الشفرات تلقائيًا، ونظام مسارات قوي، مما يمكّن المطورين من بناء تطبيقات ويب حديثة بكفاءة أعلى.

الخصائص الرئيسية والمزايا لـ Nuxt.js

• العرض من جانب الخادم (SSR): تحسين سرعة تحميل الصفحات وأداء SEO.
• إنشاء المواقع الثابتة (SSG): تقديم الصفحات الثابتة مسبقًا لتحسين الأداء وتجربة المستخدم.
• تقسيم الشفرات تلقائيًا: تحميل كود JavaScript المطلوب فقط للصفحة الحالية، مما يحسّن الأداء.
• نظام المسارات المدمج: مسارات تعتمد على نظام الملفات دون الحاجة إلى تكوين إضافي.
• نظام وحدات مرن: التكامل السهل مع المكتبات والخدمات التابعة لجهات خارجية.
• نظام بيئي قوي: دعم واسع النطاق للمكونات الإضافية والوحدات، مما يسهل عملية التطوير.

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

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

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

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

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

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

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   اتبع التعليمات وأدخل اسم المشروع (يقترح أن يكون servbay-nuxt-app)، واختر الخيارات الأخرى حسب الحاجة:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

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

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

   cd servbay-nuxt-app
   npm install

تعديل محتوى مشروع Nuxt.js

1. تعديل ملف pages/index.vue

   افتح ملف pages/index.vue وقم بتعديل المحتوى لجعل صفحة الويب تعرض "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

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

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

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

   npm run dev -- --port 8585

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

2. تكوين البروكسي العكسي على ServBay Host

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

   • الاسم: My first Nuxt.js dev site
   • النطاق: servbay-nuxt-test.dev
   • نوع الاستضافة: بروكسي عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

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

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

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

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

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

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

   npm run build
   npm run export

   ستُحفظ الملفات الثابتة المنشئة في مجلد dist.

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

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

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

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

   افتح المتصفح وقم بزيارة https://servbay-nuxt-test.prod لمشاهدة النسخة الإنتاجية المبنية. مع النطاقات المخصصة وشهادات SSL المجانية التي يوفرها ServBay، سيكون موقعك أكثر أمانًا ومصداقية.

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