যখন আপনি Vue.js প্রোজেক্ট তৈরি করেন, Vue CLI আপনাকে একটি স্ট্যান্ডার্ড ডিরেক্টরি স্ট্রাকচার প্রদান করে যা প্রকল্পটির অর্গানাইজেশন এবং স্কেলেবিলিটি নিশ্চিত করে। নিচে একটি সাধারণ Vue.js প্রোজেক্টের ডিরেক্টরি স্ট্রাকচার এবং প্রতিটি ফোল্ডারের ভূমিকা দেওয়া হলো:
১. node_modules/
এই ফোল্ডারটি আপনার প্রোজেক্টে ইনস্টল করা সমস্ত প্যাকেজ এবং ডিপেনডেন্সি ধারণ করে। যখন আপনি npm বা yarn ব্যবহার করে কোনো লাইব্রেরি বা প্যাকেজ ইনস্টল করেন, সেগুলি এই ফোল্ডারে রাখা হয়।
উল্লেখযোগ্য বিষয়: এই ফোল্ডারটি অটোমেটিক্যালি তৈরি হয় এবং এতে বড় আকারের ডেটা থাকতে পারে, তাই এটি সাধারণত ভার্সন কন্ট্রোল সিস্টেম (যেমন Git) এ যোগ করা হয় না।
২. public/
এই ফোল্ডারে সাধারণত প্রোজেক্টের পাবলিক ফাইল রাখা হয়, যা ডেভেলপমেন্ট এবং প্রোডাকশনে সরাসরি ব্রাউজারে অ্যাক্সেসযোগ্য। সবচেয়ে গুরুত্বপূর্ণ ফাইল হল:
- index.html: এটি অ্যাপ্লিকেশনের মূল HTML ফাইল। Vue অ্যাপ্লিকেশনটি এই ফাইলের মধ্যে রেন্ডার হয়। আপনি এখানে
<title>,<meta>ট্যাগ এবং অন্যান্য গ্লোবাল HTML কনফিগারেশন রাখতে পারেন।
৩. src/
এই ফোল্ডারটি প্রকল্পের মূল অংশ, যেখানে সব ধরনের সোর্স কোড থাকে। এটি Vue কম্পোনেন্ট, JavaScript কোড, CSS, ইত্যাদি ধারণ করে। src/ ফোল্ডারের মধ্যে যে ফোল্ডারগুলো সাধারণত থাকে:
- assets/: এখানে অ্যাপ্লিকেশনের প্রয়োজনীয় স্ট্যাটিক ফাইল (যেমন ইমেজ, আইকন, ফন্ট) রাখা হয়।
- components/: এই ফোল্ডারে সমস্ত Vue কম্পোনেন্ট থাকে। Vue কম্পোনেন্টগুলো
.vueএক্সটেনশনের ফাইল হিসেবে থাকে, যেখানে HTML, JavaScript এবং CSS একসাথে থাকে। উদাহরণস্বরূপ,Header.vue,Footer.vueইত্যাদি। - router/: যদি আপনি Vue Router ব্যবহার করেন, তবে এখানে রাউটিং সম্পর্কিত কোড থাকে। সাধারণত,
router/index.jsফাইলে সমস্ত রাউটিং কনফিগারেশন রাখা হয়। - store/: যদি আপনি Vuex (স্টেট ম্যানেজমেন্ট) ব্যবহার করেন, তবে এখানে স্টোর সম্পর্কিত কোড থাকে।
store/index.jsফাইলে স্টেট, মিউটেশন, অ্যাকশন এবং গেটারস সংজ্ঞায়িত করা হয়। - views/: এই ফোল্ডারটি সাধারণত বিভিন্ন পেজ বা ভিউ কম্পোনেন্ট ধারণ করে, যেগুলো এক বা একাধিক কম্পোনেন্টে ভাগ করা হয়। উদাহরণস্বরূপ,
Home.vue,About.vue। - App.vue: এটি আপনার প্রোজেক্টের মূল কম্পোনেন্ট। এখানে সাধারণত অ্যাপ্লিকেশনের প্রধান লেআউট এবং UI কন্ট্রোল থাকে।
- main.js: এটি Vue অ্যাপ্লিকেশন শুরু করার প্রধান পয়েন্ট। এখানে Vue ইনস্ট্যান্স তৈরি এবং রুট কম্পোনেন্ট (App.vue) রেন্ডার করা হয়।
৪. tests/
এই ফোল্ডারটি স্বয়ংক্রিয় টেস্টিংয়ের জন্য ব্যবহৃত হয়। Vue.js প্রোজেক্টে ইউনিট টেস্ট, ইন্টিগ্রেশন টেস্ট ইত্যাদি এই ফোল্ডারে রাখা হয়। আপনি Jest বা Mocha এর মতো টেস্ট ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।
৫. .gitignore
যেহেতু Vue.js প্রোজেক্টটি গিট ব্যবহার করে পরিচালিত হয়, তাই .gitignore ফাইলটি প্রয়োজনীয় ফোল্ডার এবং ফাইলগুলো গিটে যোগ না করার জন্য কনফিগার করা হয়, যেমন node_modules/, dist/ ইত্যাদি।
৬. package.json
এই ফাইলটি প্রোজেক্টের মেটাডেটা ধারণ করে, যেমন:
- প্রোজেক্টের নাম, সংস্করণ, ডিপেনডেন্সি, স্ক্রিপ্ট ইত্যাদি।
- এখানে আপনি যে প্যাকেজগুলি ইনস্টল করেছেন (যেমন Vue, Vue Router, Vuex ইত্যাদি) সেগুলির তথ্য থাকে।
- scripts বিভাগে ডেভেলপমেন্ট, বিল্ড, টেস্টিং ইত্যাদি স্ক্রিপ্ট সংজ্ঞায়িত থাকে। উদাহরণস্বরূপ:
"serve": "vue-cli-service serve"— ডেভেলপমেন্ট সার্ভার চালানোর জন্য।"build": "vue-cli-service build"— প্রোডাকশন বিল্ড তৈরি করার জন্য।
৭. vue.config.js
এই ফাইলটি Vue CLI কনফিগারেশন ফাইল। আপনি এখানে বিভিন্ন কাস্টম কনফিগারেশন যেমন ওয়েবপ্যাক সেটিংস, প্রোক্সি, পরিবেশ ভেরিয়েবল ইত্যাদি কনফিগার করতে পারেন।
৮. dist/ (Build Output)
এই ফোল্ডারটি production build করার পর তৈরি হয়। এতে কম্পাইল করা এবং মিনিফাইড ফাইলগুলো থাকে, যা প্রকৃত অ্যাপ্লিকেশন হিসেবে ব্রাউজারে ব্যবহৃত হয়। এই ফোল্ডারটি সাধারণত .gitignore ফাইলে যোগ করা থাকে, কারণ এটি প্রজেক্টের অংশ নয়।
Vue.js প্রোজেক্টের সাধারণ ডিরেক্টরি স্ট্রাকচার:
my-vue-app/
├── node_modules/ # ইনস্টল করা প্যাকেজগুলো
├── public/ # পাবলিক ফাইল (index.html)
├── src/ # সোর্স কোড
│ ├── assets/ # স্ট্যাটিক ফাইল (ইমেজ, ফন্ট, ইত্যাদি)
│ ├── components/ # Vue কম্পোনেন্ট
│ ├── router/ # Vue Router কনফিগারেশন
│ ├── store/ # Vuex স্টেট ম্যানেজমেন্ট
│ ├── views/ # ভিউ কম্পোনেন্ট
│ ├── App.vue # মূল Vue কম্পোনেন্ট
│ └── main.js # অ্যাপ শুরু করার পয়েন্ট
├── .gitignore # গিটে যোগ না করার জন্য ফাইল
├── package.json # প্রোজেক্টের ডিপেনডেন্সি এবং স্ক্রিপ্ট
├── vue.config.js # কাস্টম কনফিগারেশন
└── tests/ # টেস্ট ফাইল
এই ডিরেক্টরি স্ট্রাকচারটি Vue.js প্রোজেক্টকে স্কেলেবল এবং পরিচালনাযোগ্য রাখে, বিশেষ করে বড় প্রকল্পে।
