إنشاء مشاريع Vue.js باستخدام Vue CLI: دليل شامل ومتعمق

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

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

مقدمة حول Vue CLI

Vue CLI (اختصارًا لـ Command Line Interface) هي أداة رسمية تابعة لمشروع Vue.js تهدف إلى تمكين المطور من إنشاء تطبيقات Vue بسهولة وبنية قوية دون الحاجة إلى تكوين كل شيء يدويًا. توفر الأداة واجهة مرنة لإنشاء مشاريع تعتمد على Webpack أو Vite، وتسمح بدمج عدد كبير من الإضافات مثل TypeScript، Vue Router، Vuex، Linter، وغيرها.

من أهم خصائص Vue CLI:

• إنشاء مشروع بسرعة بواسطة قوالب مُعدة مسبقًا

• نظام إضافات مرن وقابل للتحديث

• دعم بيئات التطوير والإنتاج

• واجهة رسومية لإدارة المشروع (Vue UI)

• دعم التخصيص المتقدم عبر ملفات تكوين مرنة

تثبيت Vue CLI

قبل البدء باستخدام Vue CLI، يجب التأكد من توفر Node.js على الجهاز. يُفضل استخدام أحدث إصدار مستقر من Node.js لضمان التوافق مع أحدث ميزات Vue.

خطوات التثبيت:

1. تثبيت Node.js:
   يمكن تحميل Node.js من الموقع الرسمي: https://nodejs.org

2. تثبيت Vue CLI باستخدام npm:
   بعد تثبيت Node.js، يتم تثبيت Vue CLI من خلال الأمر التالي في سطر الأوامر:

   bash
   CopyEdit
   npm install -g @vue/cli
   

   يمكن التحقق من التثبيت بنجاح عبر:

   bash
   CopyEdit
   vue --version
   

   سيُظهر هذا الأمر رقم الإصدار المثبت من Vue CLI.

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

بمجرد تثبيت Vue CLI، يمكن إنشاء مشروع جديد باستخدام الأمر:

bash
CopyEdit
vue create my-project

سيتم تنفيذ عدد من الخطوات التفاعلية:

• اختيار القالب المناسب (إعدادات افتراضية أو مخصصة)

• تفعيل الخيارات المطلوبة (مثل Babel, TypeScript, Router, Vuex, Linter، إلخ)

• اختيار تنسيق ملفات التكوين (ملف مستقل أو package.json)

بعد انتهاء المعالج، يتم إنشاء مجلد المشروع متضمنًا البنية التالية:

arduino
CopyEdit
my-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── package.json
├── babel.config.js
└── vue.config.js

بنية المشروع الناتج

تتضمن بنية مشروع Vue CLI مجموعة من الملفات والمجلدات الأساسية:

أوامر CLI المهمة

يوفر Vue CLI مجموعة من الأوامر الأساسية لإدارة دورة حياة المشروع:

تخصيص إعدادات Webpack و Vite

يمكن تخصيص إعدادات Webpack عبر إنشاء وتعديل ملف vue.config.js، وهو ملف JavaScript يُستخدم لتعديل البنية التحتية للمشروع.

مثال على تخصيص المسار الأساسي للتطبيق:

javascript
CopyEdit
module.exports = {
  publicPath: '/sub-directory/',
}

كما يمكن تعديل الإعدادات الخاصة بالبناء، وإضافة alias، أو تكامل مع مكتبات خارجية.

استخدام Vue CLI UI

توفر Vue CLI واجهة رسومية تسهّل إدارة الإضافات، تنفيذ الأوامر، عرض تقارير الأداء، وتعديل الإعدادات.

لتشغيل الواجهة الرسومية:

bash
CopyEdit
vue ui

سيتم فتح نافذة في المتصفح تحتوي على:

• لوحة تحكم شاملة للمشاريع

• إمكانية تثبيت الإضافات وتحديثها

• تشغيل أوامر مثل build و serve بنقرة واحدة

• استعراض إعدادات المشروع وتعديلها بصريًا

إدارة الإضافات Plugins

تُعد الإضافات من أبرز ميزات Vue CLI، حيث تسمح بإضافة وظائف متقدمة بسهولة دون إعادة تكوين المشروع يدويًا.

أمثلة على الإضافات الشائعة:

• @vue/cli-plugin-babel لتحويل الشيفرة باستخدام Babel

• @vue/cli-plugin-eslint لتحليل الكود

• @vue/cli-plugin-typescript لدعم TypeScript

• @vue/cli-plugin-router لإضافة Vue Router

• @vue/cli-plugin-vuex لإضافة Vuex

لإضافة مكون أثناء تطوير المشروع:

bash
CopyEdit
vue add router

هذا الأمر يقوم بإعداد Vue Router داخل المشروع مع الملفات الأساسية بشكل تلقائي.

إنشاء بيئات التطوير والإنتاج

يتيح Vue CLI فصل إعدادات البيئة بناءً على الملف .env:

• .env ← الإعدادات العامة

• .env.development ← عند تشغيل npm run serve

• .env.production ← عند تنفيذ npm run build

يتم تعريف المتغيرات الخاصة بالبيئة كالتالي:

bash
CopyEdit
VUE_APP_API_URL=https://api.example.com

يجب أن تبدأ جميع المتغيرات بـ VUE_APP_ ليتم التعرف عليها داخل التطبيق.

ثم يمكن استخدامها داخل الشيفرة:

js
CopyEdit
console.log(process.env.VUE_APP_API_URL)

التكامل مع Git

عند إنشاء مشروع باستخدام Vue CLI، يتم تهيئة مستودع Git تلقائيًا (إلا إذا تم إلغاء هذا الخيار أثناء الإعداد). كما يتم إنشاء ملف .gitignore لتجاهل مجلدات وملفات غير ضرورية مثل node_modules.

يمكن ربط المشروع بسهولة بمنصات GitHub أو GitLab ونشر التحديثات تلقائيًا باستخدام CI/CD.

دعم وحدات الاختبار Testing

يمكن دمج Vue CLI مع أدوات اختبار الوحدات (Unit Testing) بسهولة. من خلال إضافة الإضافة المناسبة:

bash
CopyEdit
vue add unit-jest

أو

bash
CopyEdit
vue add unit-mocha

بعد التثبيت، يمكن كتابة اختبارات داخل مجلد tests/unit/ وتشغيلها باستخدام:

bash
CopyEdit
npm run test:unit

استخدام القوالب المخصصة Presets

تدعم Vue CLI إنشاء قوالب مخصصة بحيث يمكن حفظ إعدادات مشروع معين وإعادة استخدامها لاحقًا. هذا مفيد جدًا في بيئات الفرق أو المؤسسات التي تعتمد على معايير تطوير محددة.

لإنشاء قالب مخصص:

bash
CopyEdit
vue create --preset my-preset

كما يمكن تصدير إعدادات مشروع سابق لاستخدامها لاحقًا:

bash
CopyEdit
vue save --preset my-team-standard

الجدول التوضيحي لفرق الأوامر في Vue CLI

الخاتمة

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

المراجع:

• Vue CLI Official Documentation: https://cli.vuejs.org

• Vue.js Guide: https://vuejs.org