दस्तावेज़बनाएं और परीक्षण करें
अग्रभाग
नेक्सी क्लाइंट के लिए अपना स्वयं का घटक सिस्टम शिप नहीं करता है। यह Vite पर निर्मित होता है: React, Vue, Svelte, Solid और Preact सभी समर्थित हैं, और वेनिला पेज बिना किसी क्लाइंट फ्रेमवर्क के काम करते हैं।
एक रूपरेखा सक्षम करें
from nexy.core.models import NexyConfigModelfrom nexy.frontend import react class NexyConfig(NexyConfigModel): useFF = react() # vue(), svelte(), solid(), preact()useVite डिफ़ॉल्ट रूप से True; फ़्रेमवर्क कॉन्फ़िगर होने पर इसे चालू रखें।
फ़ाइलें रूट करें
| विस्तार | प्रस्तुत किया गया |
|---|---|
.nexy, .md |
अनुरोध समय पर नेक्सी द्वारा |
.mdx, .tsx, .jsx, .vue, .svelte |
ग्राहक ढांचे द्वारा; निर्माण के समय HTML में पूर्व-रेंडर किया गया, फिर क्लाइंट बंडल द्वारा ले लिया गया |
फ़्रेमवर्क रूट एक सामान्य पृष्ठ है, न कि केवल क्लाइंट द्वीप: HTML बंडल चलने से पहले मौजूद होता है, इसलिए पहला पेंट JavaScript की प्रतीक्षा नहीं करता है।
प्रति-फ़्रेमवर्क सेटअप: React, Vue, Svelte, Solid, Preact।
विकास
nx dev एक पोर्ट पर एक सर्वर शुरू करता है:
- ऐप आपके द्वारा बदले गए मार्गों, सर्वर और क्लाइंट को पुन: संकलित करता है;
- Vite एक आंतरिक पोर्ट पर चलता है और फ्रेमवर्क मॉड्यूल परोसता है;
- नेक्सी अपने स्वयं के मूल के माध्यम से Vite के समापन बिंदुओं को प्रॉक्सी करता है।
ब्राउज़र केवल पोर्ट 3000 से बात करता है। खोलने के लिए कोई दूसरा URL नहीं है और कॉन्फ़िगर करने के लिए कोई CORS नहीं है।
निर्माण
nx build उत्पादन करता है:
- फ़्रेमवर्क मार्गों के लिए पूर्व-रेंडर HTML;
__nexy__/client/के अंतर्गत संपत्ति के साथ ग्राहक बंडल;- संकलित Python मार्ग।
Vite क्लाइंट बंडल बनाता है; प्रत्येक घटक पृष्ठ का सर्वर HTML निर्माण समय पर लिखा जाता है।
स्टाइलिंग
nexy new एक स्टाइल मोड मांगता है और इसे आपके द्वारा चुने गए क्लाइंट फ्रेमवर्क के लिए सेट करता है: Tailwind, UnoCSS या सादा सीएसएस। डिज़ाइन टोकन (रंग, फ़ॉन्ट, डार्क थीम) src/globale.css में सीएसएस वैरिएबल हैं, जो फ़ाइल स्कैफोल्ड बनाता है।
| मोड | आरंभिक पृष्ठ इसके साथ लिखे गए हैं |
|---|---|
| Tailwind, UnoCSS | मार्कअप में उपयोगिता वर्ग, वर्ग के नाम पर टोकन मैप के साथ |
| सादा सीएसएस | src/globale.css में सिमेंटिक वर्ग के नाम और सीएसएस |
जब आप कोई पृष्ठ जोड़ते हैं तो अपने प्रोजेक्ट के मोड का पालन करें: उपयोगिता प्रोजेक्ट में उपयोगिता कक्षाएं, सादे-सीएसएस में सीएसएस। घटक सीएसएस रखें जिसे उपयोगिताएँ घटक के <style> ब्लॉक में व्यक्त नहीं कर सकतीं। एक सर्वर प्रोजेक्ट में (.nexy पेज) UnoCSS कक्षाओं के लिए .nexy फाइलों को पढ़ता है; Tailwind उन्हें अपने आप ढूंढ लेता है।
फ़ॉन्ट, छवियाँ, स्क्रिप्ट
public/ में स्थिर फ़ाइलें डालें - उन्हें विकास और उत्पादन दोनों में / से परोसा जाता है।