شارك هذا المقال:
Vue.js فيو جي أس هو اطار عمل مبني على لغة جافاسكريبت وموجه لمصممي الواجهات (Front-End Developers) , تكمن روعة وأهمية Vue.js بامكانية عمل مواقع كاملة من صفحة واحدة عبر دمج عدة مكونات Components مع بعضها البعض لتحقيق واجهة متكاملة و مضاف اليها ميزات عدة تحتاج ربما مئات السطور باستخدام جافاسكريبت العادية أو حتى jQuery. ولطالما كان هناك سؤال اجابته محيرة نوعاً ما , ما هو Vue.js أصلاً ؟ و للاجابة بشكل صحيح على هذا السؤال علينا أولاً فهم ما معنى مصطلح اطار عمل في تصميم الويب وخاصة في جافاسكريبت. سنستعرض في هذا المقال أساسيات Vue.js و نتعلم كيف يمكنك التعامل مع اطار العمل هذا.
اطار العمل هو مصلح من المصطلحات الثلاثة الشهيرة في تصميم الويب , وهي المكتبات ( Libraries ) , أطر العمل ( Framework ) , والاضافات ( Plugins ) و حديثنا هنا عن أطر العمل , ان كنت قادم من خلفية برمجية وسمعت بلغة PHP فمن المؤكد انك تعرف اطار عمل لارافل , و قد سبق ونشرنا مقال بعنوان ما هو Laravel لارافل ؟ , بالنسبة ل Vue.js فهي تماماً كلارفل بالنسبة ل لغة جافاسكريبت , اطار عمل مبني على لغة جافاسكريبت ولو أردنا التحدث بمصطلحات علمية بحتة فان تعريف اطار العمل العلمي هو : "مجموعة من المكونات الجاهزة التي يستخدمها المبرمج في برنامج , حيث أن الهدف منها هو تكوين بنية تحتية تساعد المبرمج على اتمام مهامه بسرعة وجودة عالية" _ويكيبيديا). فاذا واعتماداً على هذا التعريف فان Vue.js هي مجموعة من المكونات الجاهزة (دوال , كائنات ... الخ) مبنية على لغة جافاسكريبت تساعدنا كمصممي واجهات انجاز أعمالنا بسرعة وجودة أكبر :) , وهذا التعريف صحيح كلياً وخلال سطور هذا المقال سنستوضح صحة هذا التعريف ونطبقه على ما سيتم شرحه في تكملة المقال .
اضافة الى الى 5 أسباب التي تدفعك الى تعلم Vue.js فان تميز Vue.js يكمن في سهولتها الملحوظة مقارنة بالمنافسين ك Angular , React وغيرهم , اضافة الى ذلك اعتماد اطار عمل لارافل لها كاطار عمل مضمن اساساً ضمن أي مشروع لارافل جديد , وتتضح سهولتها عند التجربة , فان كنت تتقن HTML , CSS , Javscript فأنت قد أتقنت Vue.js تقريباً! كما أن الدعم المتوفر لها عبر الانترنت شاسع وكافي لحل اي مشكلة تواجهك , فأي مشكلة قد تواجهك من المؤكد أنها قد حلت على Github , Stackoverflow او نقرة من قبل. وأيضاً , يقول معظم محبي Vue.js ان الاضافات الموجودة فيها بشكل اساسي (تحصل عليها عند تفعيلها على موقعك) أفضل بكثير من غيرها , فبمجرد تضمين اطار العمل في مشروعك ستحصل على Vue-Router , Vuex مضمنين تلقائياً في نواة اطار العمل . اذاً كيف نبدأ في انشاء مشروع Vue جديد ؟ ستبدأ الرحلة الآن
عبر تضمين ملف اطار العمل يتم تضمين Vue في مشروعك عبر طريقتين , الطريقة الأولى عبر CDN Content Delivery Network , تقوم باضافة اطار عمل Vue.js في أسفل الصفحة تماماً كأي ملف جافاسكريبت تريد تضمينه في موقعك , كما يمكنك طبعاً تنزيل Vue.js واضافتها الى ملفاتك وتضمينها والكود هو التالي:
<script src="SRC_TO_VUEJS_FILE"></script>
من المستبعد أن تواجه اي مشاكل باستخدام الطريقة السابقة , فهي أبسط طريقة لاستخدام اطار العمل ولا يوجد أي شيئ مميز فيها , ومن الواجب التنبيه ان Vue.js نسختين , نسخة مجهزة لعلمية التطوير ( Development Version ) ونسخة مخصصة للنشر ( Production Vesrion ) كلا النسختين يؤديان نفس المهمة على صعيد الكود , لكن نسخة التطوير تعطيك مساحة أكبر لتصحيح الأخطاء وتوضح لك رسائل الخطأ وما الى ذلك وأيضاً تعطيك الوصول لاستخدام Vue extension وهي اضافة لمتصفحات كروم وفيرفوكس والمتصفحات المبنية عليها , وسنأتي على ذكرها بشكل مفصل أكثر لاحقاً في هذا المقال. عبر Vue CLI الطريقة الثانية لانشاء مشروع Vue.js هي عبر Vue CLI و أحرف CLI ترمز الى Command Line Interface اي واجهة سطر الأوامر , ولا داعي للذعر هنا فالأوامر المطلوبة بسيطة جداً لانشاء مشروع جديد 1- الخطوة الأولى , تنصيب Vue على جهازك :
npm install -g @vue/cli
# OR
yarn global add @vue/cli
الأمر السابق (أحد الأمرين) يقوم بتنصيب Vue CLI على جهازك , والفكرة هنا هي أن تنصيب Vue CLI على الجهاز تساعدك في انشاء مشاريع أخرى لاحقاً , و يوجد معلومتين مهم ذكرهم هنا , امر npm لا يمكن استخدامه ان لم تكن قمت بتنصيب Node.js على جهازك , يمكنك تنصيبه كأي برنامج عادي من هنا https://nodejs.org/en/ الملاحظة الثانية موجهة لمستخدمي لينكس , قد تحتاج الى اضافة الكلمة sudo قبل أمر تنصيب Vue CLI او حتى قبل امر استخدام vue-cli لانشاء مشروع جديد , لأن لينكس يمتلك حساسية مريبة تجاه أذونات الملفات D: 2- الخطوة الثانية , انشاء مشروع جديد : لانشاء مشروع جديد , يمكنك استخدام أمر create الذي يوفره Vue CLI الذي قمنا بتنصيبه قبل قليل , والأمر يبدو كالتالي:
vue create hello-world
سيظهر لك في سطر الأوامر هذا الشكل بعد ادخال أمر انشاء مشروع جديد , ويطلب منك هنا اختيار بيئة معينة , يوجد 3 بيئات معدة سابقاً ومن المرجح لغالب المشاريع البسيطة اختيار default اما المشاريع الأكبر فغالباً ما تختار start و ان كنت تعي تماماً ما تفعله ولديك خبرة واسعة في جافاسكريبت يمكنك اختيار Manually select features و اختيار ما تفضله . يقدم آدم جارن , من قناة Vue Mastery شرح مفصل عن عملية انشاء مشروع جديد باستخدام Vue CLI , واليك الفيديو
كما قدمت قناة The Net Ninja قائمة تشغيل من 10 فيديوهات عن Vue CLI يمكنك مشاهدتها من هنا اما بالنسبة للمحتوى العربي , فقدم أسامة محمد من قناة Elzero Web School دورة كاملة عن Vue.js ككل , وفي الدرس الواحد و العشرين و الثاني و العشرين شرح بتفصيل عملية انشاء مشروع عبر Vue CLI والخيارات المتاحة وتفصيلها . وفي عودة لمقالنا , سنقوم باختيار Default من سطر الأوامر عبر التنقل باستخدام الأسهم و الضغط على Enter للاختيار. سيطلب منك بعض المعلومات الأساسية التي توضع في ملف package.json , أسم المشروع والاصدار وما الى ذلك , لا يوجد مبدأ معين هنا فقط قم بكتابة ما يتناسب مع مشروعك , ولا يهم حقاً أن تكون معلومات صحيحة أصلاً , لكن ما الذي يمنع من كتابة معلومات صحيحة ؟ القرار لك في كل الأحوال. سيقوم سطر الأوامر بانشاء المشروع , وأكرر التذكير بأهمية الانتباه لأمر sudo هنا في حال كنت من مستخدمي لينكس , تجهيز المشروع قد يحتاج 4 الى 10 دقائق حسب سرعة الانترنت لديك , وسيقوم بتحميل ما يزيد عن 100 ميغا بايت بقليل من الملفات في مجلد node_modules , عند الانتهاء , عليك كتابة أمرين أخيرين في سطر الأوامر لمشاهدة المشروع , الأمر الأول هو الدخول الى مجلد المشروع الجديد:
cd hello-world
الأمر الثاني هو تشغيل سيرفر التطوير Development Serve عبر الأمر التالي:
npm run serve
سيؤدي هذا الى أن يقوم سطر الأوامر ببناء سيرفر تجريبي لك ستستخدمه خلال عملية التطوير , غالباً السيرفر يكون localhost:8080 وقد يختلف ال Port تبعاً للمتوفر, بمجرد دخولك على الرابط ستجد نفسك في الصفحة الرئيسية للمشروع , تهانينا!
ان كنت قمت بتنصب Vue.js عبر اضافتها كملف جافاسكريبت عادي , فتخطى هذا القسم فهو موجه لمن قام باستخدام Vue CLI . عند الدخول الى مشروعك عبر محرر أكواد ما , ستجد أمامك مجموعة من المجلدات و الملفات ونبدأ بالمجلد الأول من الأعلى متجهين الى الأسفل .
1- مجلد node_modules مجلد نظام ان صح التعبير , يحوي هذا المجلد على كل المكتبات و الاضافات التي قمت بتنزيلها اثناء انشاء مشروع جديد , في أكثر من 99% من الحالات لن تحتاج أصلاً الدخول الى هذا المجلد أو تعديل اي شيئ فيه , الهدف منه هو تشغيل اطار العمل فعلياً خلف الكواليس , لا يوجد أي شيئ تحتاج فعله تجاه هذا المجلد سوى الاحتفاظ به , ان قمت بحذف المجلد ستواجه مشاكل كبيرة خلال العمل , ولن يعمل التطبيق أصلاً , لذا لنطبق هنا قاعدة "لا فائز ولا خاسر" ودع المجلد وشأنه.
2- مجلد public من اسم المجلد يمكنك توقع الهدف منه , يحوي هذا المجلد النتائج النهائية للمشروع , ضمن هذا المجلد يمكنك انشاء مجلدات أخرى ك css , images , icons وغيرها وتضمينها في مشروعك , كما يحوي مجلد public ملف باسم index.html , لنقل ان هذا الملف هو الملف النهائي , لن يحوي أي أكواد حقيقة فالأكواد موجودة ضمن ال Components التي سنأتي على ذكرها خلال دقيقة , لكن يمكن في هذا الملف تضمين ملفات css الخارجية كمكتبات أو غير ذلك , كما يمكنك تغير عنوان الموقع
