দ্রুত শুরু করার নির্দেশাবলী ​

Vue অনলাইন চেষ্টা করুন ​

• দ্রুত Vue ব্যবহার করতে, আপনি এটি সরাসরি আমাদের এখানে চেষ্টা করতে পারেন প্লেগ্রাউন্ড।

• আপনি যদি কোনো বিল্ড স্টেপ ছাড়াই একটি প্লেইন HTML সেটআপ পছন্দ করেন, তাহলে আপনি এটি জেএসফিডল আপনার শুরুর পয়েন্ট হিসেবে ব্যবহার করতে পারেন।

• আপনি যদি ইতিমধ্যেই Node.js এবং বিল্ড টুলের ধারণার সাথে পরিচিত হন, তাহলে আপনি স্ট্যাকব্লিটজ এর মাধ্যমে আপনার ব্রাউজারের মধ্যেই একটি সম্পূর্ণ বিল্ড সেটআপ করার চেষ্টা করতে পারেন।

Creating a Vue Application ​

এই বিভাগে আমরা আপনার local মেশিনে কীভাবে একটি Vue একক পৃষ্ঠা অ্যাপ্লিকেশন স্ক্যাফল্ড করবেন তার সাথে পরিচয় করিয়ে দিব। তৈরি করা প্রোজেক্টটি Vite এর উপর ভিত্তি করে একটি বিল্ড সেটআপ ব্যবহার করবে এবং আমাদেরকে Vue Single-File Components (SFCs) ব্যবহার করার অনুমতি দিবে।

নিশ্চিত করুন যে আপনার কাছে Node.js এর একটি আপ-টু-ডেট সংস্করণ ইনস্টল করা আছে এবং আপনার বর্তমান কার্যকারী ডিরেক্টরিটি যেখানে আপনি একটি প্রকল্প তৈরি করতে চান। আপনার কমান্ড লাইনে নিম্নলিখিত কমান্ডটি চালান ($ চিহ্ন ছাড়া):

$ npm create vue@latest

$ pnpm create vue@latest

$ yarn create vue@latest

$ bun create vue@latest

এই কমান্ডটি create-vue, অফিসিয়াল Vue প্রোজেক্ট স্ক্যাফোল্ডিং টুল ইনস্টল এবং কার্যকর করবে। টাইপস্ক্রিপ্ট এবং টেস্টিং সাপোর্টের মতো কয়েকটি ঐচ্ছিক বৈশিষ্ট্যের জন্য আপনাকে প্রম্পট দেওয়া হবে:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

আপনি যদি একটি বিকল্প সম্পর্কে অনিশ্চিত হন, তাহলে এখনকার জন্য এন্টার বাটন টিপে শুধু No নির্বাচন করুন। প্রকল্পটি তৈরি হয়ে গেলে, আরও ডিপেন্ডেন্সি ইনস্টল করতে এবং ডেভ সার্ভার শুরু করতে নির্দেশাবলী অনুসরণ করুন:

$ cd <your-project-name>
$ npm install
$ npm run dev

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

আপনার প্রথম Vue প্রকল্পটি এখন চালু হয়ে যাওয়া উচিত! মনে রাখবেন যে উৎপন্ন প্রকল্পের উদাহরণ হিসেবে তৈরি হওয়া কম্পোনেন্টগুলি Options API-এর পরিবর্তে Composition API এবং <script setup> ব্যবহার করে লেখা হয়েছে। এখানে কিছু অতিরিক্ত টিপস আছে:

• প্রস্তাবিত IDE সেটআপ হল ভিজ্যুয়াল স্টুডিও কোড + ভোলার এক্সটেনশন। আপনি যদি অন্য এডিটর ব্যবহার করেন তবে IDE সমর্থন বিভাগ দেখুন।
• ব্যাকএন্ড ফ্রেমওয়ার্কের সাথে ইন্টিগ্রেশন সহ আরও টুলিং বিশদে টুলিং গাইড আলোচনা করা হয়েছে।
• অন্তর্নিহিত বিল্ড টুল Vite সম্পর্কে আরও জানতে ভাইট ডকস দেখুন।
• আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করতে চান তবে টাইপস্ক্রিপ্ট ব্যবহার নির্দেশিকা দেখুন।

আপনি যখন আপনার অ্যাপটিকে প্রোডাকশনে পাঠানোর জন্য প্রস্তুত হন, তখন নিম্নলিখিতটি চালান:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

এটি প্রোজেক্টের ./dist ডিরেক্টরিতে আপনার অ্যাপের একটি প্রোডাকশন-রেডি বিল্ড তৈরি করবে। আপনার অ্যাপকে প্রোডাকশনে পাঠানোর বিষয়ে আরও জানতে প্রোডাকশন ডিপ্লয়মেন্ট গাইড দেখুন।

পরবর্তী ধাপ >

CDN থেকে Vue ব্যবহার করা ​

আপনি একটি স্ক্রিপ্ট ট্যাগের মাধ্যমে সরাসরি CDN থেকে Vue ব্যবহার করতে পারেন:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

এখানে আমরা unpkg ব্যবহার করছি, কিন্তু আপনি যে কোনো CDN ব্যবহার করতে পারেন যা npm প্যাকেজ পরিবেশন করে, উদাহরণস্বরূপ jsdelivr অথবা cdnjs। অবশ্যই, আপনি এই ফাইলটি ডাউনলোড করতে পারেন এবং এটি নিজে ব্যবহার করতে পারেন।

একটি CDN থেকে Vue ব্যবহার করার সময়, কোন "বিল্ড স্টেপ" জড়িত থাকে না। এটি সেটআপটিকে অনেক সহজ করে তোলে এবং স্ট্যাটিক HTML বাড়ানো বা ব্যাকএন্ড ফ্রেমওয়ার্কের সাথে ব্যবহার করার জন্য উপযুক্ত। যাইহোক, আপনি একক-ফাইল কম্পোনেন্ট (SFC) সিনট্যাক্স ব্যবহার করতে পারবেন না।

গ্লোবাল বিল্ড ব্যবহার করে ​

উপরের লিঙ্কটি Vue-এর global build লোড করে, যেখানে সমস্ত টপ-লেভেল এপিআইগুলো গ্লোবাল Vue অবজেক্টের বৈশিষ্ট্য হিসেবে উন্মুক্ত হয়। এখানে গ্লোবাল বিল্ড ব্যবহার করে একটি সম্পূর্ণ উদাহরণ রয়েছে:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

ES মডিউল বিল্ড ব্যবহার করে ​

বাকি ডকুমেন্টেশন জুড়ে, আমরা প্রাথমিকভাবে ইএস মডিউল সিনট্যাক্স ব্যবহার করব। বেশিরভাগ আধুনিক ব্রাউজার এখন সাধারণত ইএস মডিউলগুলিকে সমর্থন করে, তাই আমরা একটি CDN থেকে Vue ব্যবহার করতে পারি নেটিভ ইএস মডিউলগুলির মাধ্যমে:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

লক্ষ্য করুন যে আমরা <script type="module"> ব্যবহার করছি, এবং imported CDN URL এর পরিবর্তে Vue-এর ইএস মডিউল বিল্ড-এর দিকে নির্দেশ করছে।

ইম্পোর্ট ম্যাপস ব্যবহার করে ​

উপরের উদাহরণে, আমরা সম্পূর্ণ CDN URL থেকে import করছি, কিন্তু বাকি ডকুমেন্টেশনে আপনি এইরকম কোড দেখতে পাবেন:

import { createApp } from 'vue'

আমরা ব্রাউজারকে শেখাতে পারি কোথায় vue ইম্পোর্ট ব্যবহার করে সনাক্ত করতে হয় Import Maps:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

আপনি import maps এর অন্যান্য নির্ভরতার জন্য এন্ট্রি যোগ করতে পারেন - তবে নিশ্চিত করুন যে তারা লাইব্রেরির ইএস মডিউল সংস্করণের দিকে নির্দেশ করে যা আপনি ব্যবহার করতে চান।

মডিউলগুলি বিভক্ত করা ​

আমরা গাইডের আরও গভীরে ডুব দেওয়ার সাথে সাথে আমাদের কোড আলাদা জাভাস্ক্রিপ্ট ফাইলগুলিতে বিভক্ত করতে হতে পারে যাতে সেগুলি পরিচালনা করা সহজ হয়। উদাহরণ স্বরূপ:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

আপনি যদি সরাসরি আপনার ব্রাউজারে উপরের index.html খোলেন, তাহলে আপনি একটি এরর দেখতে পাবেন কারণ ES মডিউলগুলি file:// প্রোটোকলের উপর কাজ করতে পারে না, যেটি লোকাল ফাইল খোলার জন্য ব্রাউজার ব্যবহৃত প্রোটোকল।

নিরাপত্তাজনিত কারণে, ES মডিউলগুলি শুধুমাত্র http:// প্রোটোকলের উপর কাজ করতে পারে, যা ওয়েবে পৃষ্ঠা খোলার সময় ব্রাউজার ব্যবহার করে। আমাদের লোকাল মেশিনে ইএস মডিউলগুলি কাজ করার জন্য, আমাদের একটি local HTTP সার্ভারের সাথে http:// প্রোটোকলের উপর index.html পরিবেশন করতে হবে।

একটি local HTTP সার্ভার শুরু করতে, প্রথমে নিশ্চিত করুন যে আপনি Node.js ইনস্টল করেছেন, তারপরে আপনার HTML ফাইলটি যেখানে একই ডিরেক্টরিতে কমান্ড লাইন থেকে npx serve চালান। আপনি অন্য কোনো HTTP সার্ভারও ব্যবহার করতে পারেন যা সঠিক MIME প্রকারের সাথে স্ট্যাটিক ফাইল পরিবেশন করতে পারে।

আপনি হয়তো লক্ষ্য করেছেন যে import করা কম্পোনেন্টের টেমপ্লেটটি জাভাস্ক্রিপ্ট স্ট্রিং হিসাবে ইনলাইন করা হয়েছে। আপনি যদি VSCode ব্যবহার করেন তবে আপনি es6-string-html এক্সটেনশন ইনস্টল করতে পারেন এবং একটি /*html*/ সহ স্ট্রিংগুলি comment করতে পারেন তাদের জন্য সিনট্যাক্স হাইলাইটিং পেতে মন্তব্য করুন।

Next Steps ​

আপনি যদি ভূমিকা এড়িয়ে যান, তাহলে বাকি ডকুমেন্টেশনে যাওয়ার আগে আমরা দৃঢ়ভাবে এটি পড়ার পরামর্শ দিচ্ছি।