دستاویزات/فریم ورک کے اختلافات

Vue

Nexy سرور پر 3 سنگل فائل کے اجزاء کو Vue رینڈر کرتا ہے، پھر 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 خود __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>

جزائر

سرور موڈ میں، a Vue ایک .nexy فائل میں درآمد شدہ جزو ایک جزیرہ ہے۔

درآمد کرنا

.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");

URL تک رسائی

تمام لوکیشن ہکس کمپیوٹیڈ ریفز واپس کرتے ہیں:

• usePathname(): موجودہ راستہ
• useParams(): متحرک طبقات
• useSearchParams(): استفسار کی تار
• useLocation(): مکمل مقام آبجیکٹ

اگلے اقدامات

• آراء: ان فارمیٹس کا موازنہ کریں جو صفحہ استعمال کر سکتا ہے۔
• فرنٹ اینڈ : Vite اور کلائنٹ کی تعمیر

صفحہ Markdown کے طور پر کاپی کریں GitHub پر ترمیم کریں