Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Single-File Components ​

Introduction ​

Vue একক-ফাইল কম্পোনেন্ট (ওরফে *.vue ফাইল, সংক্ষেপে SFC) হল একটি বিশেষ ফাইল বিন্যাস যা আমাদেরকে একটি Vue কম্পোনেন্টের টেমপ্লেট, যুক্তি, and স্টাইলিংকে এককভাবে এনক্যাপসুলেট করতে দেয় ফাইল এখানে একটি উদাহরণ SFC:

vue
<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

আমরা দেখতে পাচ্ছি, Vue SFC হল এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের ক্লাসিক ত্রয়ীটির একটি প্রাকৃতিক এক্সটেনশন। <template>, <script>, এবং <style> ব্লক একই ফাইলে একটি কম্পোনেন্টের Vue, লজিক এবং স্টাইলিংকে এনক্যাপসুলেট করে এবং একত্রিত করে। সম্পূর্ণ সিনট্যাক্সটি SFC Syntax Specification এ সংজ্ঞায়িত করা হয়েছে।

Why SFC ​

যদিও SFC-এর জন্য একটি বিল্ড স্টেপ প্রয়োজন, তার বিনিময়ে অনেক সুবিধা রয়েছে:

  • পরিচিত HTML, CSS এবং JavaScript সিনট্যাক্স ব্যবহার করে লেখক মডুলারাইজড কম্পোনেন্ট
  • Colocation of inherently coupled concerns
  • Pre-compiled templates without runtime compilation cost
  • Component-scoped CSS
  • More ergonomic syntax when working with Composition API
  • ক্রস-বিশ্লেষণ টেমপ্লেট এবং স্ক্রিপ্ট দ্বারা আরও কম্পাইল-টাইম অপ্টিমাইজেশান
  • IDE support টেমপ্লেট এক্সপ্রেশনের জন্য স্বয়ংক্রিয়-সম্পূর্ণতা এবং টাইপ-চেকিং সহ
  • আউট-অফ-দ্য-বক্স হট-মডিউল প্রতিস্থাপন (HMR) সমর্থন

SFC হল একটি কাঠামো হিসাবে Vue-এর একটি সংজ্ঞায়িত বৈশিষ্ট্য, এবং নিম্নলিখিত পরিস্থিতিতে Vue ব্যবহার করার জন্য প্রস্তাবিত পদ্ধতি:

  • একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA)
  • স্ট্যাটিক সাইট জেনারেশন (SSG)
  • যেকোন নন-তুচ্ছ ফ্রন্টএন্ড যেখানে একটি বিল্ড স্টেপ আরও ভালো উন্নয়ন অভিজ্ঞতার (DX) জন্য ন্যায়সঙ্গত হতে পারে।

এটি বলেছিল, আমরা বুঝতে পারি এমন পরিস্থিতি রয়েছে যেখানে SFCগুলি ওভারকিলের মতো অনুভব করতে পারে। এই কারণেই Vue এখনও বিল্ড স্টেপ ছাড়া প্লেইন জাভাস্ক্রিপ্টের মাধ্যমে ব্যবহার করা যেতে পারে। আপনি যদি হালকা ইন্টারঅ্যাকশনের সাথে বহুলাংশে স্ট্যাটিক এইচটিএমএল উন্নত করতে চান তবে আপনি petite-vue, প্রগতিশীল বর্ধনের জন্য অপ্টিমাইজ করা Vue-এর একটি 6 kB উপসেটও দেখতে পারেন .

How It Works ​

Vue SFC হল একটি ফ্রেমওয়ার্ক-নির্দিষ্ট ফাইল বিন্যাস এবং এটি অবশ্যই @vue/compiler-sfc দ্বারা আদর্শ জাভাস্ক্রিপ্টে প্রি-কম্পাইল করা আবশ্যক। এবং CSS। একটি সংকলিত SFC হল একটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট (ES) মডিউল - যার মানে সঠিক বিল্ড সেটআপের সাথে আপনি একটি মডিউলের মতো একটি SFC আমদানি করতে পারেন:

js
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

SFC-এর ভিতরে <style> ট্যাগগুলি সাধারণত হট আপডেটগুলিকে সমর্থন করার জন্য ডেভেলপমেন্টের সময় নেটিভ <style> ট্যাগ হিসাবে ইনজেক্ট করা হয়। উৎপাদনের জন্য এগুলি বের করে একটি একক CSS ফাইলে মার্জ করা যায়।

আপনি SFC-এর সাথে খেলতে পারেন এবং এগুলি কীভাবে সংকলিত হয় তা অন্বেষণ করতে পারেন Vue SFC Playground.

প্রকৃত প্রকল্পগুলিতে, আমরা সাধারণত Vite বা Vue CLI (যার উপর ভিত্তি করে) একটি বিল্ড টুলের সাথে SFC কম্পাইলারকে সংহত করি webpack), এবং Vue আপনাকে যত দ্রুত সম্ভব SFC-এর সাথে শুরু করার জন্য অফিসিয়াল স্ক্যাফোল্ডিং টুল সরবরাহ করে। SFC টুলিং বিভাগে আরও বিশদ দেখুন।

What About Separation of Concerns? ​

প্রথাগত ওয়েব ডেভেলপমেন্ট ব্যাকগ্রাউন্ড থেকে আগত কিছু ব্যবহারকারীর উদ্বেগ থাকতে পারে যে SFC একই জায়গায় বিভিন্ন উদ্বেগ মিশ্রিত করছে - যা HTML/CSS/JS আলাদা করার কথা ছিল!

এই প্রশ্নের উত্তর দেওয়ার জন্য, আমাদের পক্ষে একমত হওয়া গুরুত্বপূর্ণ যে উদ্বেগের পৃথকীকরণ ফাইল প্রকারের বিভাজনের সমান নয়। প্রকৌশল নীতির চূড়ান্ত লক্ষ্য হল কোডবেসগুলির রক্ষণাবেক্ষণযোগ্যতা উন্নত করা। উদ্বেগের বিচ্ছেদ, যখন দৃঢ়তার সাথে ফাইলের প্রকারের পৃথকীকরণ হিসাবে প্রয়োগ করা হয়, ক্রমবর্ধমান জটিল ফ্রন্টএন্ড অ্যাপ্লিকেশনের পরিপ্রেক্ষিতে আমাদের সেই লক্ষ্যে পৌঁছাতে সাহায্য করে না।

আধুনিক UI ডেভেলপমেন্টে, আমরা দেখতে পেয়েছি যে কোডবেসকে তিনটি বিশাল স্তরে বিভক্ত করার পরিবর্তে যা একে অপরের সাথে আন্তঃপ্রবেশ করে, তাদের ঢিলেঢালাভাবে সংযুক্ত কম্পোনেন্টগুলিতে ভাগ করা এবং সেগুলি রচনা করা অনেক বেশি অর্থবহ। একটি কম্পোনেন্টের অভ্যন্তরে, এর টেমপ্লেট, যুক্তিবিদ্যা এবং স্টাইলগুলি সহজাতভাবে মিলিত হয় এবং সেগুলিকে একত্রিত করা আসলে কম্পোনেন্টটিকে আরও সুসংহত এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

মনে রাখবেন যে আপনি একক-ফাইল কম্পোনেন্টগুলির ধারণা পছন্দ না করলেও, আপনি আপনার জাভাস্ক্রিপ্ট এবং সিএসএসকে পৃথক ফাইলে আলাদা করে এর হট-রিলোডিং এবং প্রাক-সংকলন বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন Src Imports.

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন