Build Your Project

আপনার Vue প্রকল্পটি কীভাবে তৈরি করবেন তা শিখুন

আপনার প্রকল্প তৈরি করুন

যখন একটি Vue প্রকল্প সমাপ্ত হয়, তখন এটি "ডেভেলপমেন্ট মোড" থেকে "বিল্ড" মোডে সরানো উচিত।

বিল্ড কমান্ড আমাদের Vue প্রোজেক্টকে .html, .js, এবং .css ফাইলগুলিতে কম্পাইল করে যা সরাসরি ব্রাউজারে চালানোর জন্য অপ্টিমাইজ করা হয়।

আমরা অন্যদের অ্যাক্সেস করার জন্য একটি সার্ভারে ফাইল তৈরি করতে আমাদের Vue প্রকল্প তৈরি করি।

একটি ওয়েব পেজ 'বিল্ড' করতে

এই টিউটোরিয়ালে এখন পর্যন্ত, আমাদের প্রকল্পগুলি উন্নয়ন মোডে চলছে, মানে Vite বিল্ড টুল একটি ডেভেলপমেন্ট সার্ভার চালাচ্ছে। আপনি যখন বিকাশের সময় পরিবর্তন করেন এবং সেগুলি সংরক্ষণ করেন, Vite অবিলম্বে পৃষ্ঠাটিকে রিফ্রেশ করে। এটি কম্পিউটার থেকে অনেক সম্পদ প্রয়োজন.

বিকাশ পর্বের পরে বিল্ড ফেজ আসে, যখন পৃষ্ঠাটি জনসাধারণের কাছে প্রকাশের জন্য প্রস্তুত হয়। তারপরে আমাদের প্রকল্পটি বিকাশ মোডে Vite না চালিয়ে ব্রাউজার-বোধগম্য ফাইলগুলিতে তৈরি করতে হবে। সার্ভার রিসোর্স ব্যবহার কমাতে এবং কর্মক্ষমতা উন্নত করতে বিল্ড স্টেপ করা হয়।

আপনার Vue অ্যাপ তৈরি করতে, যদি ডেভেলপমেন্ট সার্ভার চলছে, তাহলে 'Q' বা 'ctrl'+'C' টিপে এটি বন্ধ করুন, তারপর টাইপ করুন:

npm run build

যখন আপনার প্রজেক্ট তৈরি করা হয়, তখন Vite আপনার প্রোজেক্টকে একটি পাবলিক সার্ভারে চালানোর জন্য প্রয়োজনীয় সমস্ত ফাইলের সাথে dist নামে একটি ফোল্ডার তৈরি করে, যেখানে আমরা ডেভেলপমেন্টের সময় ব্যবহার করি *.vue ফাইলগুলির পরিবর্তে ব্রাউজার-বোধগম্য *.html, *.css এবং *.js ফাইলগুলি সহ।

📁চিত্র 30: ডিস্ট ফোল্ডার

Dist folder structure after Vue project build

Vue প্রকল্প নির্মাণের পরে ডিস্ট ফোল্ডার কাঠামো

একটি ব্রাউজারে আপনার নির্মিত প্রকল্প দেখতে, কমান্ডটি ব্যবহার করুন:

npm run preview

এই কমান্ডটি একটি ব্রাউজার উইন্ডো খুলবে যা ডিস্ট ফোল্ডার থেকে নির্মিত প্রকল্পটি দেখায়।

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

প্রশিক্ষণ:

______ কমান্ড আমাদের Vue প্রোজেক্টকে .html, .js, এবং .css ফাইলগুলিতে কম্পাইল করে যা সরাসরি ব্রাউজারে চালানোর জন্য অপ্টিমাইজ করা হয়।

npm run dev
✗ ভুল! npm run dev অ্যাপ্লিকেশনটি বিকাশ মোডে চালানোর জন্য ব্যবহৃত হয়, নির্মাণের জন্য নয়
npm start
✗ ভুল! npm start ব্যবহার করা হয় অ্যাপ্লিকেশন শুরু করতে, নির্মাণ করতে নয়
npm run build
✓ ঠিক আছে! npm রান বিল্ড কমান্ড Vue প্রোজেক্টকে বিল্ড ফাইলে কম্পাইল করে
npm compile
✗ ভুল! npm কম্পাইল একটি বৈধ npm কমান্ড নয়