فهم واجهة سطر الأوامر Vue.js وكيفية استخدامها

تُعد واجهة سطر الأوامر (Vue.js CLI) أداة قوية تبسط عملية إعداد وتطوير وإدارة مشاريع Vue.js. وتوفر طريقة موحدة وفعالة لإنشاء مشاريع جديدة وإدارة التبعيات وتكوين إعدادات البناء. ستستكشف هذه المقالة ميزات واجهة سطر الأوامر (Vue CLI) وتوضح كيفية استخدامها بشكل فعال.

تثبيت Vue CLI

للبدء في استخدام Vue CLI، تحتاج إلى تثبيته عالميًا على نظامك. تأكد من تثبيت Node.js وnpm (Node Package Manager)، ثم قم بتشغيل الأمر التالي في المحطة الطرفية أو موجه الأوامر:

npm install -g @vue/cli

يقوم هذا الأمر بتثبيت Vue CLI عالميًا، مما يجعل الأمر vue متاحًا لإنشاء وإدارة مشاريع Vue.js.

إنشاء مشروع Vue.js جديد

مع تثبيت Vue CLI، يمكنك بسهولة إنشاء مشروع Vue.js جديد عن طريق تشغيل الأمر التالي:

vue create my-vue-project

سيُطلب منك تحديد إعداد مسبق لمشروعك. يمكنك الاختيار من الإعداد المسبق الافتراضي، والذي يتضمن Babel وESLint، أو تحديد ميزات يدويًا مثل Vue Router وVuex وTypeScript. بالنسبة للمبتدئين، يوصى باختيار الإعداد المسبق الافتراضي بالضغط على Enter.

فهم الإعدادات المسبقة لـ Vue CLI

يوفر Vue CLI عدة خيارات لتكوين مشروعك من خلال الإعدادات المسبقة:

الإعداد الافتراضي: يتضمن أدوات أساسية مثل Babel وESLint. مناسب لمعظم المشروعات ونقطة بداية جيدة للمبتدئين.
تحديد الميزات يدويًا: يسمح لك باختيار ميزات محددة مثل Vue Router للتوجيه، وVuex لإدارة الحالة، وTypeScript للتحقق من النوع، والمزيد.

هيكل المشروع

بمجرد إنشاء مشروعك، سترى هيكل مشروع Vue.js القياسي. فيما يلي بعض المجلدات والملفات الرئيسية:

src: يحتوي على الكود المصدر لتطبيقك، بما في ذلك المكونات والعروض والأنماط.
public: يحتوي على أصول ثابتة وملف index.html، والذي يعمل كنقطة دخول لتطبيقك.
src/main.js: ملف الإدخال لتطبيق Vue الخاص بك. يقوم بتهيئة مثيل Vue وتركيبه في DOM.
src/App.vue: المكون الجذري لتطبيقك. يمكنك تخصيص هذا الملف لتحديد التصميم الرئيسي لتطبيقك.
src/components: يحتوي على مكونات Vue. يمكنك إضافة مكونات جديدة هنا واستيرادها إلى تطبيقك.

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

لرؤية تطبيق Vue.js الخاص بك أثناء العمل، ابدأ تشغيل خادم التطوير عن طريق تشغيل الأمر التالي:

npm run serve

سيؤدي هذا إلى بدء تشغيل خادم محلي على http://localhost:8080 (أو منفذ متاح آخر). افتح عنوان URL هذا في متصفحك لعرض تطبيقك.

بناء للإنتاج

عندما تكون مستعدًا لنشر تطبيقك، فأنت بحاجة إلى بنائه للإنتاج. قم بتشغيل الأمر التالي لإنشاء بناء جاهز للإنتاج:

npm run build

يؤدي هذا الأمر إلى إنشاء ملفات مُحسَّنة ومُصغَّرة في المجلد dist، والتي يمكنك نشرها على خادم الويب الخاص بك.

استخدام مكونات Vue CLI الإضافية

يدعم Vue CLI المكونات الإضافية التي تضيف ميزات وقدرات إلى مشروعك. لتثبيت مكون إضافي، قم بتشغيل الأمر التالي:

vue add

على سبيل المثال، لإضافة Vue Router إلى مشروعك، يجب عليك تشغيل:

vue add router

لإزالة مكون إضافي، استخدم الأمر vue remove:

vue remove router

يمكن أيضًا تثبيت المكونات الإضافية وإدارتها من خلال الملف vue.config.js أو عن طريق تعديل تكوين المشروع.

تخصيص تكوين Vue CLI

يمكنك تخصيص تكوين Vue CLI عن طريق إنشاء أو تعديل ملف vue.config.js في جذر مشروعك. يتيح لك هذا الملف ضبط إعدادات مختلفة مثل تكوينات الوكيل والمسارات العامة والمزيد.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

خاتمة

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

vuejs سطر الأوامر تثبيت إنشاء مشروع إعداد مسبق مكونات تقديم بناء مكونات إضافية تكوين تطوير إنتاج إعداد