الوثائق/اختلافات الإطار

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 يكتب __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>

جزر

في وضع الخادم، يكون المكون 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