TodoList এখানে একটি অ্যাপ্লিকেশন তৈরি করার জন্য নির্দিষ্ট কোড উদাহরণ সহ একটি বিস্তারিত ধাপে ধাপে নির্দেশিকা রয়েছে Vue.js:
ধাপ 1: প্রকল্প সেট আপ করা
Vue.js Vue CLI ব্যবহার করে একটি নতুন প্রকল্প তৈরি করে শুরু করুন । আপনার টার্মিনাল খুলুন এবং নিম্নলিখিত কমান্ড চালান:
todo-list-app
এটি মৌলিক প্রকল্প কাঠামো এবং নির্ভরতা সহ একটি নতুন ডিরেক্টরি তৈরি করবে ।
ধাপ 2: তৈরি করা TodoList Component
ফোল্ডারের ভিতরে src
, নামক একটি নতুন ফাইল তৈরি করুন TodoList.vue
। এটি অ্যাপ্লিকেশনের জন্য প্রধান উপাদান হবে TodoList ।
মধ্যে TodoList.vue
:
ধাপ 3: তৈরি করা TodoItem Component
ফোল্ডারের ভিতরে src
, নামক একটি নতুন ফাইল তৈরি করুন TodoItem.vue
। এটি একটি শিশু উপাদান হবে যা পৃথক করণীয় আইটেম রেন্ডার করার জন্য দায়ী।
মধ্যে TodoItem.vue
:
ধাপ 4: আপডেট করা হচ্ছে TodoList Component
.vue- এর ভিতরে, v-for নির্দেশিকা ব্যবহার করে s TodoList রেন্ডার করতে টেমপ্লেট বিভাগটি আপডেট করুন । TodoItem
মধ্যে TodoList.vue
:
ধাপ 5: TodoList অ্যাপ্লিকেশন পরীক্ষা করা
অ্যাপ্লিকেশন পরীক্ষা করতে TodoList, "src/App.vue" ফাইলটি খুলুন এবং নিম্নলিখিত কোড দিয়ে বিদ্যমান সামগ্রী প্রতিস্থাপন করুন:
ধাপ 6: অ্যাপ্লিকেশন চালানো
সমস্ত পরিবর্তনগুলি সংরক্ষণ করুন এবং টার্মিনালে নিম্নলিখিত কমান্ডটি চালিয়ে ডেভেলপমেন্ট সার্ভার শুরু করুন:
অ্যাকশনে অ্যাপ্লিকেশন http://localhost:8080
দেখতে আপনার ওয়েব ব্রাউজারে যান । TodoList
এই উদাহরণটি a এর মৌলিক কার্যকারিতা প্রদর্শন করে
TodoList অ্যাপ্লিকেশন ব্যবহার করে Vue.js । ব্যবহারকারীরা করণীয় আইটেমগুলির একটি তালিকা দেখতে পারে, সেগুলিকে সম্পূর্ণ হিসাবে চিহ্নিত করতে, সেগুলিকে মুছে ফেলতে এবং প্রদত্ত ফর্মটি ব্যবহার করে নতুন আইটেম যোগ করতে পারে৷ করণীয় আইটেমগুলির অবস্থা উপাদানটিতে পরিচালিত হয় TodoList, যখন প্রতিটি পৃথক করণীয় আইটেম TodoItem উপাদান ব্যবহার করে রেন্ডার করা হয়।
দয়া করে মনে রাখবেন যে এটি একটি সরলীকৃত বাস্তবায়ন, এবং আপনি আপনার নির্দিষ্ট প্রয়োজনের উপর ভিত্তি করে অ্যাপ্লিকেশনটিকে আরও কাস্টমাইজ এবং উন্নত করতে পারেন।