اختيار حزمة Vue المناسبة لعام 2025 وما بعده
Vue + Vite + Pinia + Nuxt مقابل SPA، واعتماد TypeScript، وهرم الاختبارات في Vue
اختيار حزمة Vue المناسبة لعام 2025 وما بعده درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
لا توجد حزمة واحدة صحيحة للجميع
تعتمد حزمة Vue المناسبة على احتياجات تطبيقك، مثل تحسين محركات البحث والتفاعلية وهدف النشر وحجم الفريق. يربط هذا الدرس المتطلبات الشائعة بحزم موصى بها، حتى تتمكن من الاختيار بوعي بدلًا من اتباع العادة.
حزمة SPA التقليدية
بالنسبة إلى لوحات المعلومات الشبيهة بالتطبيقات التي تتطلب تسجيل الدخول ولا تهمها محركات البحث، تكون SPA المُصيّرة على جانب العميل مثالية: Vite + Vue + Pinia + Vue Router. فهي توفّر تطويرًا سريعًا واستضافة بسيطة على أي مضيف ثابت وتفاعلية كاملة على جانب العميل.
// SPA building blocks
// vite -> dev server + build
// vue -> UI
// pinia -> state management
// vue-router -> client routingمتى لا تكفي SPA
ترسل تطبيقات SPA غلافًا فارغًا أولًا، ثم تصيّر المحتوى في المتصفح. ويؤثر ذلك سلبًا في تحسين محركات البحث وفي ظهور المحتوى الأول للصفحة في مواقع المحتوى العامة. فإذا كان ترتيب نتائج البحث والمعاينات الاجتماعية مهمًا، فأنت بحاجة إلى التصيير على الخادم.
Nuxt 3 للتصيير على الخادم وتحسين محركات البحث
إن Nuxt 3 إطار العمل الفوقي المتكامل: فهو يوفّر التصيير على الخادم، والتوجيه المعتمد على الملفات، والاستيرادات التلقائية، ومسارات الخادم عبر Nitro، ومساعدات تحسين محركات البحث. اختره للمواقع التسويقية والمدونات والتجارة الإلكترونية، ولكل ما يحتاج إلى HTML قابل للفهرسة.
// Nuxt page with SEO meta
<script setup>
useSeoMeta({
title: 'Product Page',
description: 'Best widget around'
})
</script>التوليد الثابت في Nuxt
بالنسبة إلى المحتوى الذي نادرًا ما يتغير، يعيد nuxt generate تصيير الصفحات مسبقًا إلى HTML ثابت وقت البناء (SSG). وهكذا تحصل على تحسين محركات البحث وتحميل فوري من دون خادم قيد التشغيل، ويمكنك النشر على أي CDN.
# pre-render to static HTML
npx nuxi generate
# output in .output/public, deploy to a CDNدليل سريع لأوضاع التصيير
طابق الوضع مع نوع المحتوى:
- SPA — التطبيقات الخاصة ولوحات المعلومات
- SSR (Nuxt) — الصفحات العامة الديناميكية التي تحتاج إلى تحسين محركات البحث
- SSG (nuxt generate) — المحتوى الثابت غالبًا، مثل الوثائق والمدونات
- Hybrid — تخلط قواعد مسارات Nuxt بين SSR وSSG وISR لكل مسار
// nuxt.config: per-route rendering rules
routeRules: {
'/': { prerender: true },
'/admin/**': { ssr: false },
'/news/**': { swr: 60 }
}TypeScript في كل مكان
في عام 2025، يُعدّ TypeScript الخيار الافتراضي الموصى به في جميع أجزاء الحزمة، بما في ذلك المكوّنات والمخازن وملفات composables ومسارات الخادم. ويؤدي استخدام <script setup lang="ts"> مع الخصائص والأحداث والنماذج المعرّفة الأنواع إلى اكتشاف الأخطاء وقت الترجمة، كما يوفّر دعمًا ممتازًا في المحرّر.
<script setup lang="ts">
const props = defineProps<{ id: number; title: string }>()
const emit = defineEmits<{ save: [id: number] }>()
</script>إدارة الحالة: Pinia افتراضيًا
إن Pinia مكتبة الحالة الرسمية؛ فهي تدعم الأنواع، وتتكامل جيدًا مع أدوات التطوير، وقابلة للتركيب. ولجلب بيانات الخادم وتخزينها مؤقتًا، اقرنها بـ useFetch وuseAsyncData في Nuxt، أو بمكتبات مثل TanStack Query.
import { defineStore } from 'pinia'
export const useCart = defineStore('cart', () => {
const items = ref([])
const total = computed(() => items.value.length)
return { items, total }
})هرم الاختبار
تتبع استراتيجية الاختبار المتوازنة شكل الهرم: عدد كبير من اختبارات الوحدة السريعة، وعدد أقل من اختبارات المكوّنات، ومجموعة صغيرة من اختبارات شاملة من البداية إلى النهاية. والأدوات الموصى بها هي: Vitest لاختبارات الوحدة، وVue Test Utils لاختبارات المكوّنات، وPlaywright للاختبارات الشاملة.
Vitest وVue Test Utils
يشغّل Vitest اختبارات الوحدة والمكوّنات بسرعة، إذ يشارك إعداد Vite. أما Vue Test Utils فيركّب المكوّنات للتحقق من المخرجات المصيّرة والتفاعلات.
import { mount } from '@vue/test-utils'
import { test, expect } from 'vitest'
import Counter from './Counter.vue'
test('increments', async () => {
const w = mount(Counter)
await w.find('button').trigger('click')
expect(w.text()).toContain('1')
})Playwright للاختبارات الشاملة
يتحكم Playwright في متصفح حقيقي لاختبار مسارات المستخدم الكاملة عبر التطبيق قيد التشغيل، مثل تسجيل الدخول والتنقل والنماذج. اجعل هذه الاختبارات قليلة وعالية القيمة، وغطِّ بها المسارات الحرجة.
import { test, expect } from '@playwright/test'
test('user logs in', async ({ page }) => {
await page.goto('/login')
await page.fill('#email', 'a@b.com')
await page.click('button[type=submit]')
await expect(page).toHaveURL('/dashboard')
})اختبار سريع
اختبر مدى فهمك لاختيار حزمة Vue.
مراجعة
تعلّمت كيفية اختيار حزمة Vue لعام 2025:
- SPA (Vite + Vue + Pinia + Router) للتطبيقات الخاصة
- Nuxt 3 لـ SSR وتحسين محركات البحث؛ وnuxt generate للمواقع الثابتة
- يُعدّ استخدام TypeScript في كل مكان الخيار الافتراضي الموصى به
- استخدم Pinia لإدارة الحالة
- هرم الاختبار: Vitest + Vue Test Utils + Playwright
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «اختيار حزمة Vue المناسبة لعام 2025 وما بعده» مجاني؟
نعم — نص درس «اختيار حزمة Vue المناسبة لعام 2025 وما بعده» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «اختيار حزمة Vue المناسبة لعام 2025 وما بعده»؟
Vue + Vite + Pinia + Nuxt مقابل SPA، واعتماد TypeScript، وهرم الاختبارات في Vue تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «اختيار حزمة Vue المناسبة لعام 2025 وما بعده»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Vue Vapor Mode: تحسين وقت الترجمة
- منظومة Vite: الإضافات وأدوات التطوير
- Vue Macros ومقترحات المجتمع
- اختيار حزمة Vue المناسبة لعام 2025 وما بعده