close

تثبيت Vue.js وإنشاء مشروعك الأول

لتثبيت Vue.js ، يمكنك اتباع الخطوات التالية:

الخطوة 1: قم بإنشاء دليل جديد لمشروعك وافتح Terminal في هذا الدليل.

الخطوة 2: استخدم npm لتثبيت Vue CLI(واجهة سطر الأوامر) عن طريق تشغيل الأمر التالي:

npm install -g @vue/cli


الخطوة 3: بعد التثبيت الناجح ، يمكنك إنشاء مشروع Vue جديد باستخدام الأمر التالي:

vue create my-vue-project


الخطوة 4: اختر خيارات التكوين لمشروعك ، بما في ذلك تثبيت معالجات Babel و ESLint و CSS المسبقة(اختياري).

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

cd my-vue-project


الخطوة 6: قم بتشغيل الأمر التالي لبدء مشروع Vue:

npm run serve


بعد اكتمال عملية بدء التشغيل ، سترى عنوان URL للوصول إلى تطبيق Vue الخاص بك على المتصفح.

مثال بسيط على Vue.js:

لنقم بإنشاء ملف HTML جديد وقم بتسميته index.html ``. في هذا الملف ، أضف الكود التالي:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

في هذا المثال ، أنشأنا تطبيق Vue بسيطًا بعلامة h1 وزر. عند النقر فوق الزر ، ستتغير الرسالة.

احفظ index.html  الملف وافتحه في المتصفح. سترى الرسالة الأولية كـ "Hello Vue.js!". عند النقر فوق الزر ، ستتغير الرسالة إلى "تم تغيير الرسالة بنجاح!".

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