दस्तावेज़/ढाँचे में अंतर

Vue

नेक्सी सर्वर पर 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 पर संपादित करें