ما هو Vue.js فيو جي أس؟ درس مفصل لتعلم Vue.js للمبتدئين

ما هو Vue.js فيو جي أس؟ درس مفصل لتعلم Vue.js للمبتدئين

Vue.js فيو جي أس هو اطار عمل مبني على لغة جافاسكريبت وموجه لمصممي الواجهات (Front-End Developers) , تكمن روعة وأهمية Vue.js بامكانية عمل مواقع كاملة من صفحة واحدة عبر دمج عدة مكونات Components مع بعضها البعض لتحقيق واجهة متكاملة و مضاف اليها ميزات عدة تحتاج ربما مئات السطور باستخدام جافاسكريبت العادية أو حتى jQuery. ولطالما كان هناك سؤال اجابته محيرة نوعاً ما , ما هو Vue.js أصلاً ؟ و للاجابة بشكل صحيح على هذا السؤال علينا أولاً فهم ما معنى مصطلح اطار عمل في تصميم الويب وخاصة في جافاسكريبت. سنستعرض في هذا المقال أساسيات Vue.js و نتعلم كيف يمكنك التعامل مع اطار العمل هذا.

Vue.js فيو جي اس هو اطار عمل , ما معنى اطار العمل ؟

اطار العمل هو مصلح من المصطلحات الثلاثة الشهيرة في تصميم الويب , وهي المكتبات ( Libraries ) , أطر العمل ( Framework ) , والاضافات ( Plugins ) و حديثنا هنا عن أطر العمل , ان كنت قادم من خلفية برمجية وسمعت بلغة PHP فمن المؤكد انك تعرف اطار عمل لارافل , و قد سبق ونشرنا مقال بعنوان ما هو Laravel لارافل ؟ , بالنسبة ل Vue.js فهي تماماً كلارفل بالنسبة ل لغة جافاسكريبت , اطار عمل مبني على لغة جافاسكريبت ولو أردنا التحدث بمصطلحات علمية بحتة فان تعريف اطار العمل العلمي هو : "مجموعة من المكونات الجاهزة التي يستخدمها المبرمج في برنامج , حيث أن الهدف منها هو تكوين بنية تحتية تساعد المبرمج على اتمام مهامه بسرعة وجودة عالية" _ويكيبيديا. فاذا واعتماداً على هذا التعريف فان 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.js فيو جي اس جديد

عبر تضمين ملف اطار العمل يتم تضمين 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 , واليك الفيديو

<iframe class="ql-video ql-align-right ql-direction-rtl" src="https://www.youtube.com/embed/cP9bhEknW\_g?showinfo=0" frameborder="0" allowfullscreen="allowfullscreen">\</iframe> كما قدمت قناة The Net Ninja قائمة تشغيل من 10 فيديوهات عن Vue CLI يمكنك مشاهدتها من [هنا](https://www.youtube.com/watch?v=KeFdy1kVH4A&list=PL4cUxeGkcC9iCKx06qSncuvEPZ7x1UnKD) اما بالنسبة للمحتوى العربي , فقدم أسامة محمد من قناة Elzero Web School دورة كاملة عن Vue.js ككل , وفي الدرس [الواحد و العشرين](https://www.youtube.com/watch?v=ROdXUqt9uBM&list=PLDoPjvoNmBAxr5AqK3Yz4DWYKVSmIFziw&index=21) و[ الثاني و العشرين](https://www.youtube.com/watch?v=WybW6XuSf6g&list=PLDoPjvoNmBAxr5AqK3Yz4DWYKVSmIFziw&index=22) شرح بتفصيل عملية انشاء مشروع عبر 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.js عبر اضافتها كملف جافاسكريبت عادي , فتخطى هذا القسم فهو موجه لمن قام باستخدام Vue CLI . عند الدخول الى مشروعك عبر محرر أكواد ما , ستجد أمامك مجموعة من المجلدات و الملفات ونبدأ بالمجلد الأول من الأعلى متجهين الى الأسفل . 1- مجلد node_modules مجلد نظام ان صح التعبير , يحوي هذا المجلد على كل المكتبات و الاضافات التي قمت بتنزيلها اثناء انشاء مشروع جديد , في أكثر من 99% من الحالات لن تحتاج أصلاً الدخول الى هذا المجلد أو تعديل اي شيئ فيه , الهدف منه هو تشغيل اطار العمل فعلياً خلف الكواليس , لا يوجد أي شيئ تحتاج فعله تجاه هذا المجلد سوى الاحتفاظ به , ان قمت بحذف المجلد ستواجه مشاكل كبيرة خلال العمل , ولن يعمل التطبيق أصلاً , لذا لنطبق هنا قاعدة "لا فائز ولا خاسر" ودع المجلد وشأنه. 2- مجلد public من اسم المجلد يمكنك توقع الهدف منه , يحوي هذا المجلد النتائج النهائية للمشروع , ضمن هذا المجلد يمكنك انشاء مجلدات أخرى ك css , images , icons وغيرها وتضمينها في مشروعك , كما يحوي مجلد public ملف باسم index.html , لنقل ان هذا الملف هو الملف النهائي , لن يحوي أي أكواد حقيقة فالأكواد موجودة ضمن ال Components التي سنأتي على ذكرها خلال دقيقة , لكن يمكن في هذا الملف تضمين ملفات css الخارجية كمكتبات أو غير ذلك , كما يمكنك تغير عنوان الموقع



ما رأيك في هذا المقال؟

كيف تقييم نوعية المحتوى في نقرة؟

5 4 3 2 1