जानें कि स्टाइलिश Svelte ऐप के साथ शुरुआत कैसे करें।

वेब फ्रेमवर्क आते हैं और चले जाते हैं, लेकिन सबसे आशाजनक में से एक स्वेल्ट है। स्वेल्ट रिएक्ट का एक बढ़िया विकल्प है और, हालांकि इसमें पहले से ही एक बड़ा समुदाय है, यह निश्चित रूप से देखने लायक एक रूपरेखा है। Svelte आपके ऐप्स को स्टाइल करना आसान बनाता है, जिसमें कई दृष्टिकोण उपलब्ध हैं।

स्टाइलिंग स्वेल्ट अनुप्रयोग

प्रत्येक यूआई लाइब्रेरी या फ्रेमवर्क को अपने घटकों को स्टाइल करने के लिए एक विधि की आवश्यकता होती है। अधिकांश घटक-आधारित ढाँचे घटकों को स्टाइल करने की पारंपरिक पद्धति का समर्थन करते हैं: बस सीएसएस फ़ाइल आयात करें और आपका काम हो गया। स्वेल्ट कोई अपवाद नहीं है. स्वेल्ट में, आपके एप्लिकेशन को स्टाइल करने के तीन मुख्य तरीके हैं, प्रत्येक के अपने फायदे और नुकसान हैं।

अपना व्यापक प्रोजेक्ट स्थापित करना

Svelte को स्थापित करने के लिए, आप इसका उपयोग कर सकते हैं ViteJS फ्रंट-एंड बिल्ड टूल. चीज़ों को सेट करने के लिए, सुनिश्चित करें कि Node.js रनटाइम और नोड पैकेज मैनेजर (एनपीएम) आपके कंप्यूटर पर सही ढंग से स्थापित हैं. आप इस टर्मिनल को निम्नलिखित कमांड चलाकर Node.js और NPM की उपलब्धता सत्यापित कर सकते हैं:

instagram viewer 
node -v

यह सुनिश्चित करने के बाद कि नोड चल रहा है, टर्मिनल खोलें और निम्नलिखित चलाएँ:

npm create vite

या:

yarn create vite

इसे एक नई Vite परियोजना का आधार बनाना चाहिए। प्रोजेक्ट का नाम आप जो चाहें सेट करें, फ्रेमवर्क "स्वेल्टे" होना चाहिए और वेरिएंट जावास्क्रिप्ट होना चाहिए (लेकिन यदि आप इसके साथ सहज हैं तो आप टाइपस्क्रिप्ट का उपयोग कर सकते हैं)। अब, प्रोजेक्ट डायरेक्टरी पर स्विच करें सीडी कमांड करें और आवश्यक निर्भरताएँ स्थापित करने के लिए निम्नलिखित कमांड चलाएँ:

npm install

या:

yarn

निर्भरताएँ स्थापित करने के बाद आप विकास सर्वर चलाकर प्रारंभ कर सकते हैं:

npm run dev

या:

yarn dev

प्रोजेक्ट के मार्कअप को परिभाषित करना

प्रोजेक्ट को पसंद के किसी भी कोड संपादक में खोलें और हटा दें संपत्ति और उदारीकरण फ़ोल्डर. साथ ही, सुनिश्चित करें कि आपने इसकी सामग्री साफ़ कर दी है ऐप.सीएसएस फ़ाइल और App.svelte फ़ाइल। खोलें मुख्य.जे.एस फ़ाइल करें और सामग्री को निम्नलिखित से बदलें:

import App from'./App.svelte'
const app = new App({
 target: document.getElementById('app'),
})
exportdefault app

अगला, खोलें App.svelte फ़ाइल और में लिखी हुई कहानी टैग करें और एक सरणी बनाएं जिसमें अलग-अलग लिंक होंगे, जैसे: