Vue.js দিয়ে প্রথম প্রোজেক্ট তৈরি করার জন্য Vue CLI ব্যবহার করা সবচেয়ে সহজ এবং জনপ্রিয় পদ্ধতি। নিচে প্রথম Vue.js প্রোজেক্ট তৈরি করার জন্য প্রয়োজনীয় পদক্ষেপগুলি দেওয়া হলো:
১. নতুন Vue প্রোজেক্ট তৈরি করা
Vue CLI ইনস্টল করার পর, আপনি খুব সহজেই একটি নতুন Vue.js প্রোজেক্ট তৈরি করতে পারবেন। নিচের ধাপগুলো অনুসরণ করুন:
নতুন প্রোজেক্ট তৈরি করুন:
vue create my-vue-app
এখানে my-vue-app হলো আপনার প্রোজেক্টের নাম। আপনি চাইলে এটি আপনার পছন্দ অনুযায়ী পরিবর্তন করতে পারেন। এই কমান্ডটি চালানোর পর Vue CLI আপনার জন্য একটি নতুন Vue প্রোজেক্ট তৈরি করবে।
কনফিগারেশন নির্বাচন:
Vue CLI আপনাকে বিভিন্ন কনফিগারেশন অপশন দিবে। আপনি সাধারণত দুটি অপশন পাবেন:
- Default preset (Babel, ESLint)
- Manually select features (এটা দিয়ে আপনি বিভিন্ন বৈশিষ্ট্য নির্বাচন করতে পারবেন যেমন Vuex, Vue Router, TypeScript, ইত্যাদি)
সাধারণত, আপনি Default preset নির্বাচন করতে পারেন।
? Please pick a preset: default (babel, eslint)
আপনি Manually select features নির্বাচন করলে আপনি আরো বিস্তারিত কনফিগারেশন করতে পারবেন, যেমন Vue Router, Vuex, TypeScript ইত্যাদি। তবে এটি beginners এর জন্য অপ্রয়োজনীয় হতে পারে, তাই Default preset বেছে নিলে কাজ চলে যাবে।
২. প্রোজেক্টে প্রবেশ করা
নতুন Vue প্রোজেক্ট তৈরির পর, আপনাকে আপনার প্রোজেক্টের ফোল্ডারে প্রবেশ করতে হবে:
cd my-vue-app
এটি আপনাকে প্রোজেক্টের মূল ডিরেক্টরিতে নিয়ে যাবে।
৩. ডেভেলপমেন্ট সার্ভার চালানো
প্রোজেক্ট তৈরি হওয়া শেষ হলে, ডেভেলপমেন্ট সার্ভার চালিয়ে আপনার অ্যাপ দেখতে পারবেন। এই কমান্ডটি চালানোর পর, আপনার Vue অ্যাপ্লিকেশনটি ব্রাউজারে প্রদর্শিত হবে।
ডেভেলপমেন্ট সার্ভার চালানো:
npm run serve
এটি একটি লোকাল সার্ভার চালু করবে। সাধারণত, এটি http://localhost:8080/ এই পোর্টে চলবে।
ব্রাউজারে http://localhost:8080/ এ গিয়ে আপনার Vue অ্যাপ্লিকেশনটি দেখতে পারবেন।
৪. Vue প্রোজেক্টে পরিবর্তন করা
Vue.js অ্যাপ্লিকেশন তৈরি হওয়ার পর, আপনি কোড এডিটরে গিয়ে src/App.vue ফাইলটি খুলে আপনার প্রথম পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি এই ফাইলে HTML, CSS, এবং JavaScript পরিবর্তন করে অ্যাপের কন্টেন্ট এবং ডিজাইন পরিবর্তন করতে পারবেন।
৫. প্রোজেক্টে ডিপেনডেন্সি যোগ করা
Vue.js প্রোজেক্টের মধ্যে বিভিন্ন লাইব্রেরি বা প্যাকেজ যোগ করতে চাইলে আপনি npm ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি Vue Router বা Vuex ইনস্টল করতে চান, তাহলে নিচের কমান্ডটি ব্যবহার করতে পারেন:
Vue Router ইনস্টল করা:
npm install vue-router
Vuex ইনস্টল করা:
npm install vuex
এগুলি ইনস্টল করার পর আপনি আপনার প্রোজেক্টে সেগুলি ব্যবহার করতে পারবেন।
এখন আপনার প্রথম Vue.js প্রোজেক্ট তৈরি হয়ে গেছে এবং আপনি এটি কাস্টমাইজ, ডেভেলপ এবং ডিপ্লয় করতে প্রস্তুত!
