ماهو vue cli

إن Vue CLI هو الأداة الرسمية ل Vue.js وهي لتسهيل إنشاء وإدارة مشاريع Vue.js. وهي إختصار ل Vue Command Line Interface أي واجهة سطر الأوامر الخاصة ب Vue.

و CLI هي أداة تعتمد على الأوامر النصية -سطر الأوامر- وتستخدم لإنشاء تطبيقات Vue.js مع إعدادات جاهزة مثل:

• إعداد Webpack
• دعم TypeScript
• دعم Vue Router و Vuex
• إعداد بيئة التطوير (Development Server)
• تحزيم الملفات وتجهيزها للإنتاج (Production Build)

ونستخدم CLI لتوفير الوقت حيث يقوم بإعداد وإنشاء المشروع تلقائيا دون الحاجة لضبط كل شيء يدويا. ويحتوي على أوامر عديدة لتسهيل التطوير مثل npm run serve لتشغيل خادم للمشروع للتطوير. ويمكنك تخصيص الإعدادات كما تريد .

ولإستخدامه يجب أولا تثبيته هكذا :

npm install -g @vue/cli

بعد تثبيته يمكننا إستخدامه لإنشاء المشروع هكذا :

vue create my-project

وستظهر لك خيارات تسألك لتخصيص المشروع مثل هل تريد إستخدام الإعدادات الافتراضية أو تخصيص المشروع واختيار Vue Router أو Vuex أو Linter وغيرها.

وبعد ذلك يمكنك تشغيل المشروع في بيئة التطوير من خلال الأمر :

npm run serve

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

npm run build

ويمكنك قراءة المزيد من خلال الدرس التالي :

بشكل مبسط Vue CLI أداة بناء لمشاريع Vue.js.  مثل Create React App  في React فيقوم بنفس الوظيفة .

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

ويعتبر Vite هو البديل الأكثر شيوعًا والأسرع لـ Vue CLI في الوقت الحالي. فهو يركز على سرعة التطوير فينصح به حاليًا لبدء مشاريع Vue.js الجديدة.

الـ CLI  اختصار لـ Command Line Interface، أي واجهة سطر الأوامر، بمعنى يتعامل المستخدم معها بكتابة أوامر نصّية بدل الضغط على أزرار أو أيقونات من خلال واجهة مستخدم GUI.

والأدوات التالية هي CLI أيضًا ‎bash، ‎zsh، ‎PowerShell، أو أوامر git، npm، pip وغيرهم.

وستجد الكثير من أُطر العمل أو المكتبات توفر مكتبة CLI خاصة لتوفير سكريبت جاهز يتم تنفيذه في الخلفية دونّ دراية منك، عن طريق أمر بسيط، وذلك لأتمتة المهام المتكررة وسرعة في التنفيذ مقارنًة بالواجهات الرسوميّة، وإمكانية دمج الأوامر في سكربتات CI/CD ولتوحيد عملية التطوير بين الجميع.

بمعنى إنشاء وإدارة مشاريع Vue بسرعة وبدون إعداد يدوي معقد،  حيث مكتبة Vue CLI تعتمد داخليًّا على Webpack لتجميع الكود، وتُنشئ هيكل مشروع يشمل:

• ملفات ‎.vue‎ (Single-File Components)
• إعداد ‎Babel‎ و‎ESLint‎ و‎PostCSS‎
• سيرفر تطوير مع Hot-Reload
• تأتي بنظام Plugins وPresets بحيث تستطيع يمكنك إضافة Router, Vuex, TypeScript, Vuetify بخطوة واحدة.
• توفر أمر vue ui للحصول على واجهة رسومية اختيارية لإدارة الإعدادات.