Vue Academy · درس

تثبيت Vue CLI

ثبّت Vue CLI واستخدمه لإنشاء مشاريع جديدة

تثبيت Vue CLI درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

ما هي Vue CLI؟

تُعد Vue CLI أداة سطر الأوامر الكلاسيكية لإنشاء هيكل مشاريع Vue وإدارتها.

تنشئ مشاريع بإعدادات افتراضية مناسبة
تدير إعدادات عملية البناء من خلال الإضافات
مبنية على webpack

كانت الأداة القياسية لسنوات، إلا أن Vue الحديثة تفضّل Vite الآن.

تثبيت Vue CLI على مستوى النظام

ثبّت CLI على مستوى النظام حتى يصبح الأمر vue متاحًا من أي مكان.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

إنشاء مشروع

استخدم vue create لإنشاء هيكل مشروع جديد. ويجب تزويده باسم المشروع.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

اختيار الإعدادات المسبقة

تطلب منك CLI اختيار إعداد مسبق:

يوفّر الإعداد الافتراضي Babel وESLint، وهو المسار الأسرع
يتيح لك اختيار الميزات يدويًا إضافة Router وVuex وTypeScript وأدوات الاختبار وغير ذلك

يمكن حفظ الإعدادات المسبقة وإعادة استخدامها في المشاريع المستقبلية.

اختيار الميزات يدويًا

عند اختيار التحديد اليدوي، يمكنك تفعيل الميزات التي تريدها أو إلغاء تفعيلها.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

تشغيل المشروع

بعد الإنشاء، تعرض CLI الأوامر اللازمة لبدء تشغيل تطبيقك.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

ظهور Vite

إن Vite أداة البناء الحديثة التي أنشأها فريق Vue.

تستخدم وحدات ES الأصلية لبدء التشغيل فورًا
توفر استبدالًا سريعًا جدًا للوحدات أثناء التشغيل
أسرع بكثير من Vue CLI المعتمدة على webpack

أصبحت Vite الآن الأداة الموصى بها لمشاريع Vue الجديدة.

Vite مقارنةً بـ Vue CLI

إليك مقارنة بين الأداتين:

تستخدم Vue CLI webpack، وتتميز ببدء تشغيل بارد أبطأ، لكنها ناضجة وقابلة للتهيئة
تستخدم Vite ‏esbuild وESM الأصلي، وتبدأ التشغيل شبه فورًا، وهي الخيار الافتراضي مستقبلًا

أصبحت Vue CLI في وضع الصيانة الآن. فضّل Vite، إلا إذا كنت تدير مشروعًا قديمًا.

npm create vue@latest

الطريقة الرسمية لبدء مشروع Vue جديد مدعوم بـ Vite هي استخدام أداة create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

تشغيل مشروع create-vue

تستخدم create-vue البرامج النصية القياسية الخاصة بـ Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

أي أداة ينبغي أن تستخدم؟

إرشادات الاختيار:

هل تبدأ مشروعًا جديدًا في عام 2024 أو بعده؟ استخدم npm create vue@latest ‏(Vite)
هل تدير مشروعًا قديمًا أُنشئ باستخدام Vue CLI؟ واصل استخدامه
هل تريد أسرع تجربة تطوير؟ تتفوق Vite

تحقق سريع

اختبر مدى فهمك لاختيارات أدوات Vue.

مراجعة: تثبيت Vue CLI

تعرّفت إلى أدوات إنشاء هيكل مشاريع Vue:

تُثبّت Vue CLI باستخدام npm install -g @vue/cli
تنشئ vue create هيكل المشروع باستخدام إعدادات مسبقة
تُعد Vite البديل الحديث والسريع
يُعد npm create vue@latest الطريقة الحديثة الموصى بها للبدء

التالي: استكشاف بنية المشروع المُنشأ.

الأسئلة الشائعة

هل درس «تثبيت Vue CLI» مجاني؟

نعم — نص درس «تثبيت Vue CLI» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «تثبيت Vue CLI»؟

ثبّت Vue CLI واستخدمه لإنشاء مشاريع جديدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «تثبيت Vue CLI»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy