हाल ही में मैं Vue.js के single file components से प्यार में गिर गया है। एक घटक के टेम्पलेट और शैलियों को एक दूसरे के करीब रखने के लिए यह बहुत अच्छा है, और मुझे लगता है कि अब मैं बहुत कम बग लिखता हूं कि एक पृष्ठ के भाग को संकुचित करना और इसे कई स्थानों पर उपयोग करना इतना आसान है।क्या स्थिर HTML और CSS फ़ाइलों में Vue.js टेम्पलेट्स को संकलित करना संभव है?
मुझे आश्चर्य है कि क्या मैं स्थिर HTML पृष्ठों को उत्पन्न करने के लिए इस एकल-फ़ाइल घटक संरचना का विस्तार कर सकता हूं, जिसमें कोई भी शामिल नहीं है।
उदाहरण के लिए, कहें कि मैं एक ऐसा पृष्ठ चाहता हूं जिसमें मुख्य "सामग्री" div हो जिसमें एक शीर्षलेख, एक अनुभाग और एक पाद लेख हो। Vue.js का उपयोग करके, मैं 'हेडर', 'सेक्शन' और 'पाद लेख' घटक बना सकता हूं, और पेज लोड के बाद उन्हें तुरंत चालू करने के लिए जावास्क्रिप्ट का उपयोग कर सकता हूं। चूंकि पृष्ठ का प्रत्येक भाग अपने स्वयं के घटक में है, इसलिए किसी घटक को किसी अन्य घटक को प्रभावित करने में सीएसएस का कोई मौका नहीं है, और मेरे पास संपादित करने के लिए फ़ाइलों का एक बहुत साफ पेड़ है।
बहरहाल, यह एक छोटे से बेकार लगता है, के रूप में इन घटकों वास्तव में इंटरैक्टिव नहीं हैं: मैं बस Vue.js उपयोग कर रहा हूँ क्योंकि यह मेरे पृष्ठों की अलग-अलग टुकड़ों की सुविधा देता है बाहर मैं v-model
या v-bind
या v-on
का उपयोग नहीं कर रहा हूँ,। इसका अर्थ यह भी है कि जावास्क्रिप्ट अक्षम होने पर मेरा पृष्ठ बिल्कुल काम नहीं करेगा, क्योंकि प्रत्येक तत्व (मुख्य सामग्री div को सहेजना) उपलब्ध होने पर निर्भर है।
तो क्या कोई तरीका है कि मैं संकुचित कर सकता हूं। कोई फ़ाइल नहीं, जो इस घटक को Vue.js का उपयोग करके रनटाइम पर लोड करता है, लेकिन HTML और CSS फ़ाइलों को अलग करने के लिए जो किसी भी जावास्क्रिप्ट के बिना प्रस्तुत करता है?
<template>
<p class="greeting">Hello!</p>
</template>
<style scoped>
.greeting { color: red; }
</style>
एक पृष्ठ के भीतर उपयोग किया::
<html>
<body>
<greeting></greeting>
</body>
</html>
और इन दो फ़ाइलों में संकलन होगा: के साथ एक HTML पृष्ठ
आदर्श रूप में, मैं एक घटक 'greeting.vue' होगा टेम्पलेट संकलित और पूर्व-प्रस्तुत, और एक सीएसएस फ़ाइल जिसमें सभी घटकों के लिए शैलियों शामिल हैं। इसके बाद मैं पृष्ठ में जनरेटेड स्टाइलशीट शामिल कर सकता था, और सभी घटकों को स्टाइल किया जाएगा।
मैंने vue-loader और vueify पर देखा है, लेकिन मुझे समझ में नहीं आता कि वे क्या कर रहे हैं क्योंकि मैंने वेबपैक या ब्राउज़र को पर्याप्त रूप से उपयोग नहीं किया है।
क्या मैं संभव करने की कोशिश कर रहा हूं?
यह वही था जो मैंने उपयोग किया था। –