হ্যালো সবাইকে, আশা করি সবাই ভালো আছেন। আজ আলোচনা করবো Vue Js কি, কিভাবে Install করতে হয় এবং প্রাথমিক জিনিসগুলোর পরিচিতি।
What is Vue Js?
Vue Js হলো একটি JavaScript Framework যেটি মূলত Front-end Application এর জন্য ব্যবহার করা হয়। একে নানা উদ্দেশ্যেই ব্যবহার করা যায়, কিন্তু আমরা ব্যবহার করবো Website এর UI (User Interface) তৈরী করার জন্য। সাধারণত Website এ কোনো Interaction এর দরকার পড়লে Vue ব্যবহার করতে হয়।
Vue Installation Process...
আপনার Project এ Vue মোট ৩ ভাবে Install করতে পারবেন। যেমনঃ
CDN ব্যবহার করে,
Node Js ব্যবহার করে এবং
CLI ব্যবহার করে।
- CDN
শুরুতে vue-project নামে একটি Directory বানাবো। এর মধ্যে index.html নামে একটি file নিবো। এ index.html ফাইলের ভিতরে <head></head> ট্যাগ এর মধ্যে Vue এর CDN লিঙ্কটা বসিয়ে দিবো। (Vue এর CDN লিঙ্ক তাদের Official Website এ পেয়ে যাবেন)। ব্যাস হয়ে গেলো Vue Js Install।
কোনটা কিভাবে কাজ করছে আপাতত না বুঝলেও চলবে। শুধু দেখুন CDN লিঙ্কটা কাজ করছে কিনা?
- Node Js
Node Js দিয়ে Install করতে হলে আমাদের কয়েকটি Command লিখতে হবে। এই Command গুলো ব্যবহার করলে Node নিজেই একটি Vue Environment তৈরী করে দিবে।
npm init vue@latest
এটা Terminal এ দেওয়ার পর আপনার প্রজেক্টের নাম দিতে বলবে। এখানে মূলত Directory এর নাম হবে। নাম দেওয়ার পরে Enter চাপুন। এরপরে কয়েকটি প্রশ্ন করা হবে, আপাতত আমরা প্রাথমিক Installation করছি তাই সব No দিবো।
cd <your-project-name>
এবার cd লিখে আপনার যেই প্রজেক্টের নাম দিয়েছিলেন সেইটা লিখবেন। এরপর Enter.
npm install
এই কমান্ডে আপনার Vue ফাইলগুলো কম্বাইন্ড করে একটি সার্ভার তৈরী করে দিবে।
এই সার্ভারের লিঙ্কে গিয়ে দেখবেন আপনার Vue Application সেটআপ হয়ে গেছে।
এবার আমাদের কিছু প্রাথমিক বিষয় জানতে হবে। এগুলো কি? কেনো ব্যবহার হয়? এসব ব্যাপারে পরিষ্কার ধারণা থাকা জরুরী।
Vue Application কি?
Vue Install করার পরে একটি Function Import করতে হয় createApp নামে। এটা আসলে কি? এটা হলো Vue এর Built-in Function. এটাকে Vue এর সবকিছু বলতে পারেন। এই createApp ছাড়া Vue অচল। তাই Vue দিয়ে কোন কিছু বানাতে চাইলে সবার আগে এই createApp Function কে আপনার .js ফাইলে Import করে নিতে হবে।
এই লাইন দেখলেই বোঝা যাচ্ছে যে, createApp কে Vue থেকে Import করা হলো।
Vue এর Instance কি?
আমরা যেই createApp Function কে Import করলাম, এটার মধ্যে Vue এর সব command বা সব নিয়ম- কানুন রয়েছে। এই function কে কাজে লাগাতে হলে নতুন variable নিয়ে সেটার ভিতরে বলে দিতে হয় কি কি করতে হবে। এবার নতুন এই Variable এর ভিতরে যদি createApp কে ব্যবহার করি তাহলে এই এক একটা Variable কেই Instance বলে।
এই app নামের Variable ই হচ্ছে একটা Instance। এইরকম যতগুলো Variable বানানো হবে, প্রত্যেককেই এক একটি Vue Instance বলে।
এই Instance গুলো সবসময় Object হিসেবে থাকে। মানে এর মধ্যে Object এর Value গুলোই দিতে হয়। Object এর Value গুলোর মধ্যে কয়েকটি হলোঃ Data, Methods, Computed ইত্যাদি। এদেরকে Object এর Propertyও বলা হয়।
Mount কি?
আমরা যেই Instance বানিয়েছি এটার ভিতরে যা কিছু লিখবো এর সবই আমাদের Html এর মধ্যে এক্সিকিউট হতে হবে। ধরুন একটি Button এ ক্লিক করলে “Hello” টেক্সট দেখাবে। এজন্য ঐ Button এর জন্য Instance তৈরী করতে হবে। এখন Instance টা কিভাবে এই Button টাকে চিনবে বা কিভাবে Data Pass করবে?
মূলত Mount Function টা চিনিয়ে দেওয়ার কাজ করে। Html Elements এর সাথে Instance এর সম্পর্ক তৈরী করে দেয় এই Mount.