close

Vue.js ইনস্টল করা এবং আপনার প্রথম প্রকল্প তৈরি করা

Vue.js ইনস্টল করতে, আপনি নীচের পদক্ষেপগুলি অনুসরণ করতে পারেন:

ধাপ 1: আপনার প্রকল্পের জন্য একটি নতুন ডিরেক্টরি তৈরি করুন এবং সেই ডিরেক্টরিতে টার্মিনাল খুলুন।

ধাপ 2: নিম্নলিখিত কমান্ডটি চালিয়ে Vue CLI(কমান্ড লাইন ইন্টারফেস) ইনস্টল করতে npm ব্যবহার করুন:

npm install -g @vue/cli


ধাপ 3: সফল ইনস্টলেশনের পরে, আপনি নিম্নলিখিত কমান্ড ব্যবহার করে একটি নতুন Vue প্রকল্প তৈরি করতে পারেন:

vue create my-vue-project


ধাপ 4: ব্যাবেল, 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 এর আরও অনেক বৈশিষ্ট্য এবং শক্তিশালী ক্ষমতাগুলি অন্বেষণ করতে পারেন৷