دستاویزاتبنائیں اور ٹیسٹ کریں۔

فرنٹ اینڈ

Nexy کلائنٹ کے لیے اپنا جزو نظام نہیں بھیجتا ہے۔ یہ Vite پر بنتا ہے: React، Vue، Svelte، Solid اور Preact سبھی معاون ہیں، اور ونیلا صفحات بالکل بھی کلائنٹ فریم ورک کے بغیر کام کرتے ہیں۔

ایک فریم ورک کو فعال کریں۔

nexyconfig.py
from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()   # vue(), svelte(), solid(), preact()

useVite سے پہلے سے طے شدہ True؛ فریم ورک کنفیگر ہونے پر اسے جاری رکھیں۔

فائلوں کو روٹ کریں۔

توسیع پیش کیا گیا۔
.nexy، .md درخواست کے وقت Nexy کی طرف سے
.mdx، .tsx، .jsx، .vue، .svelte کلائنٹ فریم ورک کی طرف سے؛ تعمیراتی وقت پر HTML کو پہلے سے پیش کیا گیا، پھر کلائنٹ بنڈل کے ذریعہ لے لیا گیا۔

فریم ورک روٹ ایک عام صفحہ ہے، صرف کلائنٹ کے لیے جزیرہ نہیں: بنڈل کے چلنے سے پہلے HTML موجود ہوتا ہے، اس لیے پہلا پینٹ JavaScript کا انتظار نہیں کرتا۔

فی فریم ورک سیٹ اپ: React, Vue، Svelte، Solid، Preact۔

ترقی

nx dev ایک پورٹ پر ایک سرور شروع کرتا ہے:

  1. ایپ آپ کے تبدیل کردہ راستوں، سرور اور کلائنٹ کو دوبارہ مرتب کرتی ہے۔
  2. Vite اندرونی بندرگاہ پر چلتا ہے اور فریم ورک ماڈیولز پیش کرتا ہے۔
  3. Nexy proxies 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/ میں رکھیں - وہ ترقی اور پیداوار دونوں میں / سے پیش کی جاتی ہیں۔

اگلے اقدامات

GitHub پر ترمیم کریں

Enter نتیجہ کھولتا ہے، Esc بند کرتا ہے۔