Nuxt 3 - إطار عمل Vue الهجين الشهير Vue

نيكست 3 تمت إعادة تصميمه وإعادة كتابته لدعم ESM وTypeScript محليًا. وهي غير مستقرة حاليًا، مما يجعلها غير جاهزة للإنتاج بعد. من المقرر إصدار الإصدار المرشح الأول ([email protected]) في 7 أبريل 2022.

المصدر

بدء مشروع جديد

افتح محطة طرفية أو افتح محطة طرفية مدمجة من Visual Studio الكود واستخدم الأمر التالي لإنشاء بادئ جديد المشروع:

npx nuxi init nuxt3-app

افتح مجلد nuxt3-app:

<cd nuxt3-التطبيق

قم بتثبيت التبعيات:

yarn install

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

<رمز

إنشاء التطبيق:

<رمز

قم بتشغيل التطبيق المدمج:

<رمز

ما الجديد؟

دعم 1TP5555T 3

Vue 3 تأتي مع العديد من الميزات الجديدة التي تجعل بناء التطبيقات وصيانتها أسرع وأسهل بكثير. تم إجراء أهم التغييرات على واجهة برمجة التطبيقات العالمية Vue وواجهة برمجة تطبيقات الأحداث. 1TP5555T 3يُقدِّم أيضًا ميزات جديدة مثل التزويد/الحقن، وواجهة برمجة التطبيقات التركيبية (الموضحة أدناه)، والشظايا، والنقل الآني.

التركيب API

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

نيكست 3 يوفر دليل جديد - مركبات/ - التي تسمح باستيراد مركّبات Vue تلقائيًا تطبيق مقدمة Vue.

مثال قابل للتركيب:

تصدير الدالة الافتراضية () {
   إرجاع حالة الاستخدام ('foo', () => 'bar')/// ستكون متاحة كـ useFoo() (حالة الجمل لاسم الملف بدون امتداد)
 تصدير الدالة الافتراضية () {
   إرجاع حالة الاستخدام('foo', () => 'bar')
 }
 }

مثال على استخدام قابل للتركيب في Vue المكوّن:

<div>{{ foo }}}</div>
</>

كما ترى أعلاه، يُصدَّر المُركَّب القابل للتصدير كـ useFoo، تمامًا كما هو مُعلَن في اسم const. إذا لم يكن هناك اسم تصدير، فسيتم الوصول إلى المركب القابل للتصدير كـ pascelCase لاسم الملف. كما يسمح لك أيضًا بدمج المركبات القابلة للاستيراد التلقائي بسهولة مع مركبات Vue القابلة للتركيب الشهيرة التي تسمى بينا.

المصدر

محرك نيترو

نيترو هو خادم كامل المكدس يستخدم Rollup و Node.js العاملين في التطوير لخدمة التعليمات البرمجية وعزل السياق. كما يتضمن واجهة برمجة تطبيقات الخادم والبرامج الوسيطة للخادم. في الإنتاج، يقوم المحرك ببناء التطبيق والخادم في دليل واحد - "الإخراج". الشيء هو أن الإخراج خفيف الوزن: مصغر وبدون أي العقدة الوحدات. يتيح لك Nitro نشر المخرجات على Node.js، أو بدون خادم، أو عامل، أو عرض من جانب الحافة، أو على شكل ثابت بحت. 

نيكست 3 يوفر إمكانية النشر على Azure أو Netlify دون الحاجة إلى تهيئة، إلى جانب نشر Firebase أو Cloudflare بأقل قدر من التهيئة.

فيتي

Vite هي أداة من الجيل التالي من أدوات الواجهة الأمامية، وهي ميزة مدمجة لـ نيكست 3. توفر هذه الأداة تجربة تطوير أسرع لمشاريع الويب. أما بالنسبة للتطوير، فيتمتع الخادم Vite بميزات غنية بالميزات المحسنة مقارنة بوحدات ES الأصلية واستبدال الوحدات النمطية الساخنة (HMR) بسرعة كبيرة.

في عملية البناء، يقوم Vite بتجميع التعليمات البرمجية مع Rollup المهيأ مسبقًا لتحسين الأصول الثابتة للإنتاج.

بنية الملف الجديد

المصدر

نيكست 3 يقدم بنية ملفات متغيرة قليلًا. تم إجراء أكبر التغييرات على 'app.vue' - دليل 'الصفحات/' اختياري وإذا لم يكن موجودًا، فلن يتضمن التطبيق موجه vue، وهو أمر مفيد عند إنشاء صفحة تحميل أو تطبيق لا يحتاج إلى توجيه. 

مثال على ملف app.vue.vue:

مرحباً أيها العالم!

لتضمين التوجيه والصفحات والتخطيط، تحتاج إلى استخدام مكونات مدمجة وهي "NuxtPage" و "NuxtLayout". مثال:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

'app.vue' هو المكوّن الرئيسي لـ تطبيق Nuxt، لذا فإن كل ما تمت إضافته هناك سيكون عاماً ومضمناً في كل صفحة. 

التغير في نكسر تتضمن بنية الدليل استبدال دليل "المخزن/" بدليل "المواد القابلة للتركيب/" حيث إن 1TP5555T 3يقدم المواد المركبة التي تحل محل المخازن.

الترحيل من Vue 2 إلى Vue 3 باستخدام جسر Nuxt

يقدم Nuxt 3 طبقة Nuxt Bridge - طبقة التوافق الأمامي التي تعمل على ترقية تطبيقات Nuxt 2 بميزات Nuxt 3، مما يسمح لها بترقية نفسها قطعة قطعة. يوفر الوصول إلى ميزات مثل: محرك Nitro، واجهة برمجة التطبيقات التركيبية وواجهة برمجة التطبيقات التركيبية وواجهة برمجة التطبيقات CLI الجديدة، وذلك ببساطة عن طريق تثبيت الجسر وتفعيله.

إن Nuxt Bridge متوافق مع الإصدارات السابقة، لذا ستظل الإضافات والوحدات النمطية القديمة تعمل، بينما الترحيل سهل وممكن دون إعادة كتابة التطبيق بأكمله.

لتمكين Nuxt Bridge، عليك التأكد من عدم تشغيل خادم التطوير، ثم إزالة أي ملفات قفل الحزمة وتثبيت 'nuxt-edge':

- "nuxt": "^2.15.0"

"nuxt-edge": "الأحدث"

بعد ذلك، أعد تثبيت جميع التبعيات:

تثبيت الغزل

تمت عملية الترحيل باستخدام Nuxt Bridge!

طريقة أخرى هي تثبيت نكست الجسر كتابع للتنمية:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

ثم يجب عليك تحديث النصوص البرمجية في 'packageage.json' لمراعاة التغييرات التي يجلبها خادم Nitro إلى عملية البناء.