كيفية تعلم vue

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

في حال ان كنت تريد أن تعمل مشروعا كاملا او لديك الكثير من المنطق والكثير من الصفحات والمكونات او تريد ان تعمل مشروعا كاملا وتطلقه للعلن فيجب عليك ان تفعله من سطر الأوامر. 

يمكنك الاطلاع على المقالات الموجودة في اكادمية حسوب او من خلال التوثيق الرسمي ان كنت تعرف اللغة الإنجليزية. 

يمكنك الاطلاع على كتاب vue المكتوب من قبل اكادمية حسوب ايضا.

إن تعلم Vue يمكن أن يكون من خلال كلا الطريقتين التي وضحتها،ولكن لكل واحدة منهما لها استخداماتها وفوائدها حسب هدفك من التعلم:

فالطريقة الأولى من خلال إنشاء مشروع جديد :

npm create vue@latest

حيث تستخدم تلك الطريقة كما في المشاريع الحقيقية حيث تعطيك بيئة تطوير متكاملة من خلال Vite أو Webpack و يسمح لك باستخدام:

• مكونات متعددة (Component-based)
• Vue Router
• ودعم TypeScript إن أردت
• بناء ملفات .vue

وهو مناسب لو أردت بناء تطبيقات كبيرة أو العمل في فريق أو التقديم على وظائف.

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

أما الطريقة الثانية من خلال ربط مكتبة vue في الصفحة :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

ولكنها لا تدعم vue components ولا يوجد system للموديولات modules ولهذا إذا كنت تريد البدأ  فقط في فهم المبادئ بسرعة قبل الانتقال للبيئة الاحترافية فهذه الطريقة جيدة.

ولكن إذا أردت يمكنك البدأ بالنسخة البسيطة من خلال الطريقة الثانية <script> فقط لفهم الأساسيات لمدة بسيطة مثلا يومين أو ثلاثة ثم يمكنك بعد ذلك الذهاب إلى الطريقة الأولى الإحترافية.

كلاهما صحيح وممكن، لكن من الأفضل أن تبدأ باستخدامه من خلال تضمين الرابط المباشر داخل ملف HTML باستخدام الوسم <script> حيث تتيح لك هذه الطريقة التركيز على المفاهيم الأساسية دون الحاجة إلى إعداد بيئة تطوير معقدة، مما يسهل عليك فهم آلية عمل Vue والتعامل مع البيانات والمكونات البسيطة.

أما إذا كنت تسعى لتعلم Vue بشكل احترافي وتطمح إلى بناء تطبيقات حقيقية وقابلة للتوسع، فإن استخدام الأمر التالي:

npm create vue@latest

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

يمكنك الرجوع دوما إلى التوثيق الرسمي للاطلاع أكثر على التحديثات الخاصة به مباشرة:

https://vuejs.org/

كلا الطريقتين صالحتين لتعلم Vue.js، ولكنهما تخدمان سيناريوهات مختلفة وتعتمدان على أهدافك ومستوى تعقيد المشروع. دعني أوضح الفروقات والاستخدام الأنسب لكل طريقة:

إنشاء مشروع باستخدام npm create vue@latest

هذه الطريقة تستخدم أداة Vite (أو أدوات أخرى مثل Vue CLI) لإنشاء مشروع Vue كامل مع بيئة تطوير حديثة. تقوم بإعداد هيكلية مشروع تحتوي على ملفات JavaScript/TypeScript، مكونات Vue، وإعدادات لبناء التطبيق (build) وتشغيله محليًا.

• تحصل على أدوات مثل Vite لتسريع التطوير، دعم Hot Module Replacement (HMR)، وإعدادات جاهزة للـ build.
• المشروع يأتي مع مكونات جاهزة، ملفات إعدادات، ودعم لـ Single File Components (SFCs) التي تجمع HTML/CSS/JS في ملف واحد بامتداد .vue.
• إذا كنت تخطط لتطوير تطبيقات معقدة أو تريد تعلم كيفية عمل Vue في بيئة إنتاج حقيقية.
• دعم الأدوات الحديثة: مثل TypeScript، Vue Router، Pinia (لإدارة الحالة)، واختبارات الوحدة.

استخدام Vue عبر <script> في HTML

تضمين مكتبة Vue مباشرة في صفحة HTML باستخدام رابط CDN (مثل unpkg). هذه الطريقة تتيح لك استخدام Vue داخل ملف HTML واحد دون الحاجة إلى إعداد بيئة تطوير.

• لا حاجة لتثبيت Node.js أو أي أدوات، فقط أضف السكربت في HTML واكتب الكود.
• تتيح لك تجربة Vue بسرعة دون تعقيدات إعداد المشروع.
• مناسبة لتجربة مفاهيم أساسية مثل الـ data binding، التوجيهات (directives)، أو المكونات البسيطة.