Tooling
Try It Online
Vue SFC ব্যবহার করে দেখতে আপনার মেশিনে কিছু ইনস্টল করার দরকার নেই - এমন অনলাইন খেলার মাঠ রয়েছে যা আপনাকে ব্রাউজারেই তা করতে দেয়:
- Vue SFC Playground
- সর্বদা সর্বশেষ প্রতিশ্রুতি থেকে মোতায়েন করা হয়
- কম্পোনেন্ট সংকলন ফলাফল পরিদর্শন জন্য পরিকল্পিত
- Vue + Vite on StackBlitz
- IDE-এর মতো পরিবেশে ব্রাউজারে Vite dev সার্ভার চলছে
- স্থানীয় সেটআপের নিকটতম
বাগ রিপোর্ট করার সময় প্রজনন প্রদানের জন্য এই অনলাইন খেলার মাঠগুলি ব্যবহার করার পরামর্শ দেওয়া হয়।
Project Scaffolding
Vite
Vite প্রথম শ্রেণীর Vue SFC সমর্থন সহ একটি লাইটওয়েট এবং দ্রুত বিল্ড টুল। এটি ইভান ইউ দ্বারা তৈরি করা হয়েছে, যিনি Vue এর লেখকও!
Vite + Vue এর সাথে শুরু করতে, সহজভাবে চালান:
npm
pnpm
yarn
bun
sh
$ npm create vue@latestএই কমান্ডটি create-vue, অফিসিয়াল Vue প্রোজেক্ট স্ক্যাফোল্ডিং টুল ইনস্টল এবং কার্যকর করবে।
- Vite সম্পর্কে আরও জানতে, Vite docs দেখুন।
- একটি Vite প্রকল্পে Vue-নির্দিষ্ট আচরণ কনফিগার করতে, উদাহরণস্বরূপ Vue কম্পাইলারে বিকল্পগুলি পাস করার জন্য, @vitejs/plugin-vue এর জন্য ডক্স দেখুন।
উপরে উল্লিখিত উভয় অনলাইন চেষ্টা করুন একটি Vite প্রকল্প হিসাবে ফাইল ডাউনলোড সমর্থন করে।
Vue CLI
Vue CLI হল Vue-এর অফিসিয়াল ওয়েবপ্যাক-ভিত্তিক টুলচেন। এটি এখন রক্ষণাবেক্ষণ মোডে রয়েছে এবং আমরা Vite এর সাথে নতুন প্রকল্প শুরু করার পরামর্শ দিই যদি না আপনি নির্দিষ্ট ওয়েবপ্যাক-শুধু বৈশিষ্ট্যগুলির উপর নির্ভর করেন৷ Vite বেশিরভাগ ক্ষেত্রে উন্নত ডেভেলপমেন্টকারী অভিজ্ঞতা প্রদান করবে।
Vue CLI থেকে Vite-এ স্থানান্তরিত করার তথ্যের জন্য:
- Vue CLI -> VueSchool.io থেকে ভিটে মাইগ্রেশন গাইড
- Tools/ প্লাগইন যা স্বয়ংক্রিয় স্থানান্তরে সহায়তা করে
Note on In-Browser Template Compilation
বিল্ড স্টেপ ছাড়া Vue ব্যবহার করার সময়, কম্পোনেন্ট টেমপ্লেটগুলি সরাসরি পৃষ্ঠার HTML-এ বা ইনলাইনযুক্ত JavaScript স্ট্রিং হিসাবে লেখা হয়। এই ধরনের ক্ষেত্রে, অন-দ্য-ফ্লাই টেমপ্লেট সংকলন সম্পাদন করার জন্য Vue-কে টেমপ্লেট কম্পাইলারটি ব্রাউজারে পাঠাতে হবে। অন্যদিকে, কম্পাইলারটি অপ্রয়োজনীয় হবে যদি আমরা একটি বিল্ড স্টেপ দিয়ে টেমপ্লেটগুলিকে প্রাক-কম্পাইল করি। ক্লায়েন্ট বান্ডেলের আকার কমাতে, Vue বিভিন্ন ব্যবহারের ক্ষেত্রে অপ্টিমাইজ করা different "builds" প্রদান করে।
যে ফাইলগুলি
vue.runtime.*দিয়ে শুরু হয় সেগুলো রানটাইম-শুধু বিল্ড: সেগুলি কম্পাইলারকে অন্তর্ভুক্ত করে না। এই বিল্ডগুলি ব্যবহার করার সময়, সমস্ত টেমপ্লেটগুলিকে একটি বিল্ড ধাপের মাধ্যমে প্রাক-কম্পাইল করা আবশ্যক।যে ফাইলগুলি
.runtimeঅন্তর্ভুক্ত করে না সেগুলি সম্পূর্ণ বিল্ড: তারা সরাসরি ব্রাউজারে কম্পাইলার এবং সমর্থন কম্পাইলিং টেমপ্লেট অন্তর্ভুক্ত করে। যাইহোক, তারা পেলোড ~ 14kb বৃদ্ধি করবে।
আমাদের ডিফল্ট টুলিং সেটআপগুলি শুধুমাত্র রানটাইম বিল্ড ব্যবহার করে যেহেতু SFC-তে সমস্ত টেমপ্লেট পূর্ব-সংকলিত। যদি, কোনো কারণে, একটি বিল্ড স্টেপ সহও আপনার ইন-ব্রাউজার টেমপ্লেট সংকলনের প্রয়োজন হয়, তাহলে আপনি এর পরিবর্তে বিল্ড টুলটিকে vue থেকে vue/dist/vue.esm-bundler.js নামে কনফিগার করে তা করতে পারেন।
আপনি যদি নো-বিল্ড-স্টেপ ব্যবহারের জন্য হালকা-ওজন বিকল্প খুঁজছেন, তবে petite-vue দেখুন।
IDE Support
প্রস্তাবিত IDE সেটআপ হল VS Code + Vue - অফিসিয়াল এক্সটেনশন ( পূর্বে ভোলার)। এক্সটেনশনটি টেমপ্লেট এক্সপ্রেশন এবং কম্পোনেন্ট প্রপসের জন্য সিনট্যাক্স হাইলাইটিং, টাইপস্ক্রিপ্ট সমর্থন এবং বুদ্ধিমত্তা প্রদান করে।
TIP
Vue - অফিসিয়াল প্রতিস্থাপন করে Vetur, Vue 2 এর জন্য আমাদের পূর্ববর্তী অফিসিয়াল VS কোড এক্সটেনশন। আপনার যদি বর্তমানে Vetur ইনস্টল করা থাকে, তাহলে এটিকে অক্ষম করতে ভুলবেন না Vue 3 প্রকল্প।
WebStorm এছাড়াও Vue SFC-এর জন্য দুর্দান্ত বিল্ট-ইন সমর্থন প্রদান করে।
অন্যান্য IDE যেগুলি Language Service Protocol (LSP) সমর্থন করে তারা LSP-এর মাধ্যমে Volar-এর মূল কার্যকারিতাগুলিকেও লাভ করতে পারে:
Browser Devtools
Vue ব্রাউজার devtools এক্সটেনশন আপনাকে একটি Vue অ্যাপের কম্পোনেন্ট ট্রি অন্বেষণ করতে, পৃথক কম্পোনেন্টগুলির অবস্থা পরিদর্শন করতে, স্টেট ম্যানেজমেন্ট ইভেন্টগুলি এবং প্রোফাইল কার্যকারিতা ট্র্যাক করতে দেয়৷
TypeScript
মূল নিবন্ধ: TypeScript এর সাথে Vue ব্যবহার করা।
Vue - অফিসিয়াল এক্সটেনশন টেমপ্লেট এক্সপ্রেশন এবং ক্রস-কম্পোনেন্ট প্রপস যাচাইকরণ সহ
<script lang="ts">ব্লক ব্যবহার করে SFC-এর জন্য টাইপ চেকিং প্রদান করে।ব্যবহার করুন
vue-tscকমান্ড লাইন থেকে একই ধরনের চেক করার জন্য বা SFC-এর জন্যd.tsফাইল তৈরি করার জন্য।
Testing
মূল নিবন্ধ: টেস্টিং গাইড।
Cypress E2E পরীক্ষার জন্য সুপারিশ করা হয়। এটি সাইপ্রেস কম্পোনেন্ট টেস্ট রানার এর মাধ্যমে Vue SFC-এর জন্য কম্পোনেন্ট পরীক্ষার জন্যও ব্যবহার করা যেতে পারে।
Vitest হল Vue/Vite টিমের সদস্যদের দ্বারা তৈরি করা একটি টেস্ট রানার যা গতির উপর ফোকাস করে। ইউনিট/ কম্পোনেন্ট পরীক্ষার জন্য একই তাত্ক্ষণিক প্রতিক্রিয়া লুপ প্রদান করার জন্য এটি বিশেষভাবে Vite-ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য ডিজাইন করা হয়েছে।
Jest vite-jest এর মাধ্যমে Vite-এর সাথে কাজ করা যেতে পারে। যাইহোক, এটি শুধুমাত্র তখনই সুপারিশ করা হয় যদি আপনার বিদ্যমান জেস্ট-ভিত্তিক টেস্ট স্যুট থাকে যা আপনাকে Vite-ভিত্তিক সেটআপে স্থানান্তর করতে হবে, কারণ Vitest অনেক বেশি দক্ষ ইন্টিগ্রেশনের সাথে একই ধরনের কার্যকারিতা প্রদান করে।
Linting
Vue টিম eslint-plugin-vue, একটি ESLint প্লাগইন বজায় রাখে যা SFC-নির্দিষ্ট লিন্টিং সমর্থন করে নিয়ম
পূর্বে Vue CLI ব্যবহারকারী ব্যবহারকারীরা ওয়েবপ্যাক লোডারের মাধ্যমে লিন্টার কনফিগার করতে অভ্যস্ত হতে পারে। তবে একটি Vite-ভিত্তিক বিল্ড সেটআপ ব্যবহার করার সময়, আমাদের সাধারণ সুপারিশ হল:
npm install -D eslint eslint-plugin-vue, তারপরeslint-plugin-vue-এর কনফিগারেশন গাইড অনুসরণ করুন।ESLint IDE এক্সটেনশন সেটআপ করুন, উদাহরণস্বরূপ VS কোডের জন্য ESLint, যাতে আপনি ডেভেলপমেন্টের সময় আপনার সম্পাদকের মধ্যেই লিন্টার প্রতিক্রিয়া পান। এটি ডেভ সার্ভার শুরু করার সময় অপ্রয়োজনীয় লিন্টিং ব্যয় এড়ায়।
প্রোডাকশন বিল্ড কমান্ডের অংশ হিসাবে ESLint চালান, যাতে আপনি প্রোডাকশনে শিপিংয়ের আগে সম্পূর্ণ লিন্টার প্রতিক্রিয়া পান।
(ঐচ্ছিক) সেটআপ টুল যেমন lint-staged গিট কমিট-এ স্বয়ংক্রিয়ভাবে সংশোধিত ফাইলগুলিকে লিন্ট করতে।
Formatting
The Vue - Official VS Code extension provides formatting for Vue SFCs out of the box.
Alternatively, Prettier provides built-in Vue SFC formatting support.
SFC Custom Block Integrations
কাস্টম ব্লকগুলি একই Vue ফাইলে বিভিন্ন অনুরোধের প্রশ্নের সাথে আমদানিতে কম্পাইল করা হয়। এই আমদানি অনুরোধগুলি পরিচালনা করা অন্তর্নিহিত বিল্ড টুলের উপর নির্ভর করে।
যদি Vite ব্যবহার করেন, তাহলে একটি কাস্টম Vite প্লাগইন ব্যবহার করা উচিত যাতে মিলিত কাস্টম ব্লকগুলিকে এক্সিকিউটেবল জাভাস্ক্রিপ্টে রূপান্তর করা হয়। উদাহরণ
যদি Vue CLI বা প্লেইন ওয়েবপ্যাক ব্যবহার করা হয়, তাহলে একটি ওয়েবপ্যাক লোডারকে মিলিত ব্লকগুলিকে রূপান্তর করতে কনফিগার করা উচিত। উদাহরণ
Lower-Level Packages
@vue/compiler-sfc
এই প্যাকেজটি Vue core monorepo-এর অংশ এবং সর্বদা মূল vue প্যাকেজের মতো একই সংস্করণে প্রকাশিত হয়। এটি প্রধান vue প্যাকেজের নির্ভরতা হিসাবে অন্তর্ভুক্ত করা হয়েছে এবং vue/compiler-sfc এর অধীনে প্রক্সি করা হয়েছে তাই আপনাকে এটি পৃথকভাবে ইনস্টল করতে হবে না।
প্যাকেজ নিজেই Vue SFCs প্রক্রিয়াকরণের জন্য নিম্ন-স্তরের ইউটিলিটিগুলি প্রদান করে এবং শুধুমাত্র টুলিং লেখকদের জন্য যাদের কাস্টম সরঞ্জামগুলিতে Vue SFC সমর্থন করতে হবে।
TIP
সর্বদা এই প্যাকেজটি vue/compiler-sfc গভীর আমদানির মাধ্যমে ব্যবহার করতে পছন্দ করুন কারণ এটি নিশ্চিত করে যে এর সংস্করণটি Vue রানটাইমের সাথে সিঙ্ক করা হয়েছে।
@vitejs/plugin-vue
অফিসিয়াল প্লাগইন যা Vite-এ Vue SFC সমর্থন প্রদান করে।
vue-loader
অফিসিয়াল লোডার যা ওয়েবপ্যাকে Vue SFC সমর্থন প্রদান করে। আপনি যদি Vue CLI ব্যবহার করেন, এছাড়াও Vue CLI-তে vue-লোডার বিকল্পগুলি পরিবর্তন করার ডক্স দেখুন .