إعداد مشروع Vue.js الأول الخاص بك

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

المتطلبات الأساسية

قبل إعداد مشروع Vue.js، تأكد من تثبيت ما يلي على نظامك:

Node.js وnpm: يتطلب Vue.js تثبيت Node.js وnpm (مدير حزم Node). يمكنك تنزيلهما من موقع Node.js الرسمي على الإنترنت.

الخطوة 1: تثبيت Vue CLI

Vue CLI (Command Line Interface) هي أداة تساعدك على إنشاء وإدارة مشاريع Vue.js بسهولة. لتثبيت Vue CLI عالميًا على نظامك، افتح المحطة الطرفية أو موجه الأوامر وقم بتشغيل الأمر التالي:

npm install -g @vue/cli

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

الخطوة 2: إنشاء مشروع Vue جديد

بمجرد تثبيت Vue CLI، يمكنك إنشاء مشروع Vue.js جديد عن طريق تشغيل الأمر التالي:

vue create my-vue-app

سيُطلب منك اختيار إعداد مسبق لمشروعك. يمكنك إما تحديد الإعداد المسبق الافتراضي، والذي يتضمن Babel وESLint، أو تحديد ميزات يدويًا مثل Vue Router وVuex وTypeScript والمزيد. بالنسبة للمبتدئين، يوصى باختيار الإعداد المسبق الافتراضي بالضغط على Enter.

سيقوم Vue CLI بعد ذلك بإنشاء مجلد جديد باسم my-vue-app وإعداد بنية المشروع مع جميع الملفات والتكوينات الضرورية.

الخطوة 3: انتقل إلى مجلد المشروع

بمجرد إنشاء المشروع، انتقل إلى مجلد المشروع باستخدام الأمر التالي:

cd my-vue-app

سيؤدي هذا إلى تغيير دليل عمل المحطة الطرفية الخاصة بك إلى مجلد مشروع Vue.js الذي تم إنشاؤه حديثًا.

الخطوة 4: تشغيل خادم التطوير

لرؤية تطبيق Vue.js الجديد الخاص بك أثناء العمل، ابدأ تشغيل خادم التطوير المحلي عن طريق تشغيل:

npm run serve

سيبدأ هذا الأمر تشغيل خادم التطوير على http://localhost:8080 (أو منفذ متاح آخر). افتح متصفح الويب الخاص بك وانتقل إلى عنوان URL هذا لعرض تطبيق Vue.js الجديد.

فهم هيكل المشروع

بعد إنشاء مشروع Vue.js جديد، سترى بنية مشروع منظمة بشكل جيد. فيما يلي الملفات والمجلدات الرئيسية:

src: يحتوي هذا المجلد على الكود المصدر لتطبيق Vue.js الخاص بك. توجد جميع المكونات والعروض والأنماط هنا.
public: يحتوي هذا المجلد على أصول ثابتة مثل الصور والخطوط وملف index.html، والذي يعمل كنقطة دخول لتطبيقك.
src/main.js: نقطة الدخول الرئيسية لتطبيق Vue.js الخاص بك. يقوم هذا الملف بتهيئة مثيل Vue وتركيبه في DOM.
src/App.vue: المكون الجذري لتطبيقك. يمكنك تعديل هذا الملف لتغيير التصميم الرئيسي لتطبيقك.
src/components: يحتوي هذا المجلد على أمثلة لمكونات Vue مثل HelloWorld.vue. يمكنك إضافة مكونات جديدة هنا واستيرادها إلى تطبيقك.

الخطوة 5: تخصيص التطبيق الخاص بك

يمكنك البدء في تخصيص تطبيق Vue.js الخاص بك عن طريق تحرير ملف App.vue وإنشاء مكونات جديدة. فيما يلي مثال لمكون Vue بسيط:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

احفظ تغييراتك وشاهد النتائج فورًا في متصفحك، وذلك بفضل ميزة إعادة التحميل الساخنة في Vue.

خاتمة

تهانينا! لقد نجحت في إعداد أول مشروع Vue.js الخاص بك وتعلمت أساسيات كيفية إنشاء وتشغيل تطبيق Vue. باستخدام Vue CLI، لديك أداة قوية لمساعدتك في إنشاء وتطوير وإدارة مشاريع Vue.js الخاصة بك. من هنا، يمكنك استكشاف ميزات أكثر تقدمًا مثل Vue Router للتوجيه، وVuex لإدارة الحالة، وComposition API لتطوير أكثر قوة ومرونة.

vuejs سطر الأوامر الإعداد المشروع nodejs npm المكونات القالب البرنامج النصي النمط webpack typescript جهاز التوجيه vuex