ডকুমেন্টেশন/ফ্রেমওয়ার্ক পার্থক্য

Vue

Nexy সার্ভারে Vue 3টি একক-ফাইল উপাদান রেন্ডার করে, তারপর Vue সেগুলি ব্রাউজারে নিয়ে যায়। পৃষ্ঠা, বিন্যাস, দ্বীপ এবং ক্রিয়া প্রতিটি কাঠামোতে একই: এই পৃষ্ঠাটি সেটআপকে কভার করে, তারপর যে অংশগুলি ভাগ করা চুক্তি থেকে পৃথক।

একটি প্রকল্প শুরু করুন

nx new my-app --template web-fbr-vue

nx new my-app --template web-modular-vue

টেমপ্লেটটি Vue দ্বীপ সহ একটি সার্ভার-মোড প্রকল্প। পরিবর্তে প্রম্পটের উত্তর দিতে একটি টেমপ্লেট ছাড়াই nx new my-app চালান: রাউটার, প্রকল্পের ধরন, ক্লায়েন্ট-সাইড রাউটিং ব্যবহার করবেন কিনা, তারপর ফ্রেমওয়ার্ক।

একটি বিদ্যমান প্রকল্পে Vue সক্ষম করুন

from nexy.core.models import NexyConfigModelfrom nexy.frontend import vue  class NexyConfig(NexyConfigModel):    useFF = vue()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), vue()],  customLogger: nexy.log(),});

nx new এই ফাইলটি লিখেছেন; নেক্সি নিজেই লেখেন __nexy__/vite.ts, তাই এটি সম্পাদনা করবেন না।

নিয়ম

• প্রতি একটি ফ্রেমওয়ার্ক প্রকল্প useFF ঠিক একটি কাঠামো নেয়; useFF = [vue(), react()] স্টার্টআপে সার্ভার বন্ধ করে দেয়।
• প্রতি একটি উপাদান ফাইল একটি .vue ফাইল ডিফল্ট হিসাবে তার উপাদান রপ্তানি করে; আপনি যে নামটির অধীনে এটি আমদানি করেন তা শুধুমাত্র আপনার লেখা ট্যাগ।

<template>  <h1>Hello</h1></template>

<script setup lang="ts">defineProps<{ slug: string }>();</script> <template>  <h1>{{ slug }}</h1></template>

<template>  <html>    <body>      <header>My app</header>      <main><slot /></main>    </body>  </html></template>

দ্বীপপুঞ্জ

সার্ভার মোডে, একটি .nexy ফাইলে আমদানি করা একটি Vue উপাদান একটি দ্বীপ।

আমদানি করা হচ্ছে

.nexy ফাইলের ফ্রন্টম্যাটারে উপাদান আমদানি করুন:

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

---from "@/components/Counter.vue" import Counter---<Counter start=3 />

হাইড্রেশন নির্দেশাবলী

দ্বীপ হাইড্রেট করার সময় নিয়ন্ত্রণ করতে directive প্রপ ব্যবহার করুন:

• client:load (ডিফল্ট): অবিলম্বে
• client:idle: যখন ব্রাউজার নিষ্ক্রিয় থাকে
• client:visible: যখন এটি দৃশ্যে স্ক্রোল করে
• client:media: যখন মিডিয়া কোয়েরি মেলে

কর্ম এবং নেভিগেশন

কলিং কর্ম

একটি অ্যাকশন কলের অবস্থা পরিচালনা করতে useAction হুক ব্যবহার করুন। Vue-এ, প্রত্যাবর্তিত অবস্থা (pending, data, error) গণনাকৃত রেফ।

<script setup lang="ts">import { ref } from "vue";import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const title = ref("");const { run, pending, error, data } = useAction(add_todo, {  onSuccess: () => (title.value = ""),});</script> <template>  <form @submit.prevent="run({ title })">    <input v-model="title" />    <button :disabled="pending">Add</button>  </form></template>

নেভিগেশন

ক্লায়েন্ট-সাইড ট্রানজিশনের জন্য Link উপাদান ব্যবহার করুন:

<template>  <Link href="/about" active-class="active">About</Link></template>

প্রোগ্রামেটিক নেভিগেশনের জন্য, useRouter হুক ব্যবহার করুন:

import { useRouter } from "@nexy/client"; const router = useRouter();router.push("/dashboard");

ইউআরএল অ্যাক্সেস

সমস্ত অবস্থানের হুক গণনাকৃত রেফ প্রদান করে:

• usePathname(): বর্তমান পথ
• useParams(): গতিশীল সেগমেন্ট
• useSearchParams(): ক্যোয়ারী স্ট্রিং
• useLocation(): সম্পূর্ণ অবস্থান বস্তু

পরবর্তী পদক্ষেপ

• ভিউ : একটি পৃষ্ঠা ব্যবহার করতে পারে এমন বিন্যাসের তুলনা করুন
• ফ্রন্টএন্ড: Vite এবং ক্লায়েন্ট বিল্ড

পাতাটি Markdown হিসেবে কপি করুন GitHub-এ সম্পাদনা করুন