البدء باستخدام Vue.js للمبتدئين

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

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

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

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

npm install -g @vue/cli

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

vue create my-vue-app

سيُطلب منك اختيار إعداد مسبق. بالنسبة للمبتدئين، حدد الإعداد المسبق الافتراضي بالضغط على Enter. ستنشئ واجهة سطر الأوامر Vue مجلدًا جديدًا باسم my-vue-app وتضبط هيكل المشروع لك.

انتقل إلى مجلد المشروع: انتقل إلى مجلد المشروع عن طريق تشغيل:

cd my-vue-app

قم بتشغيل خادم التطوير: لبدء تشغيل خادم تطوير محلي وعرض تطبيق Vue.js الجديد، قم بتشغيل:

npm run serve

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

فهم بنية مشروع Vue.js

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

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

إنشاء مكون Vue.js الأول الخاص بك

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

إنشاء مكون جديد: في المجلد src/components، قم بإنشاء ملف جديد باسم Greeting.vue وأضف الكود التالي:

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

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

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

ينقسم المكون إلى ثلاثة أقسام: '<template>' لترميز HTML، و'<script>' لمنطق JavaScript، و'<style>' لأنماط CSS المحددة.

استيراد المكون واستخدامه: افتح src/App.vue وقم بتعديله لاستيراد المكون Greeting الجديد واستخدامه:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

احفظ التغييرات وسيعاد تحميل خادم التطوير الخاص بك تلقائيًا. يجب أن ترى الآن رسالة الترحيب "Hello, Vue.js!" معروضة على الصفحة.

خاتمة

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

ابدأ في البناء باستخدام Vue.js اليوم واكتشف الإمكانات الكاملة لتطوير الويب الحديث!

vuejs الإعداد المكونات سطر الأوامر التثبيت المشروع القوالب البرنامج النصي النمط الاستيراد الوحدة النمطية البناء النشر النطاق