close

Vue.js انسٹال کرنا اور اپنا پہلا پروجیکٹ بنانا

Vue.js انسٹال کرنے کے لیے، آپ درج ذیل مراحل پر عمل کر سکتے ہیں:

مرحلہ 1: اپنے پروجیکٹ کے لیے ایک نئی ڈائرکٹری بنائیں اور اس ڈائرکٹری میں ٹرمینل کھولیں۔

مرحلہ 2: درج ذیل کمانڈ کو چلا کر Vue CLI(کمانڈ لائن انٹرفیس) کو انسٹال کرنے کے لیے npm استعمال کریں:

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


آغاز کا عمل مکمل ہونے کے بعد، آپ کو براؤزر پر اپنی Vue ایپلیکیشن تک رسائی حاصل کرنے کے لیے ایک URL نظر آئے گا۔

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>

اس مثال میں، ہم نے h1 ٹیگ اور بٹن کے ساتھ ایک سادہ Vue ایپلی کیشن بنائی ہے۔ بٹن پر کلک کرنے پر پیغام بدل جائے گا۔

فائل کو محفوظ کریں index.html  اور اسے براؤزر میں کھولیں۔ آپ کو ابتدائی پیغام "Hello Vue.js!" کے طور پر نظر آئے گا۔ جب آپ بٹن پر کلک کریں گے تو پیغام بدل جائے گا "پیغام کامیابی سے بدل گیا!"۔

Vue.js کے ساتھ شروع کرنے کے لیے یہ صرف ایک سادہ سی مثال ہے۔ آپ اپنی ایپلی کیشنز تیار کرتے ہوئے Vue.js کی بہت سی مزید خصوصیات اور طاقتور صلاحیتوں کو تلاش کر سکتے ہیں۔