2017-03-17 7 views
8

हाल ही में मैं 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 पर देखा है, लेकिन मुझे समझ में नहीं आता कि वे क्या कर रहे हैं क्योंकि मैंने वेबपैक या ब्राउज़र को पर्याप्त रूप से उपयोग नहीं किया है।

क्या मैं संभव करने की कोशिश कर रहा हूं?

उत्तर

3

जो आप खोज रहे हैं वह सर्वर साइड प्रतिपादन है। मैं आपको Nuxt.js. पर एक नज़र रखने का सुझाव दूंगा

From VueJS docs:

ठीक से एक उत्पादन के लिए तैयार सर्वर-प्रदान की गई एप्लिकेशन के सभी पर चर्चा पहलुओं को विन्यस्त एक चुनौतीपूर्ण काम हो सकता है। सौभाग्य से, उत्कृष्ट समुदाय प्रोजेक्ट है जिसका उद्देश्य यह सब आसान बनाना है: Nuxt.js. Nuxt.js Vue पारिस्थितिक तंत्र के शीर्ष पर बनाया गया एक उच्च स्तरीय ढांचा है जो सार्वभौमिक Vue अनुप्रयोगों को लिखने के लिए एक अत्यंत सुव्यवस्थित विकास अनुभव प्रदान करता है। अभी तक बेहतर, आप भी इसे एक स्थिर साइट जनरेटर के रूप में उपयोग कर सकते हैं ( सिंगल-फ़ाइल व्यू घटकों के रूप में लिखे गए पृष्ठों के साथ)! हम अत्यधिक कोशिश करने की सलाह देते हैं।

started प्राप्त करना बहुत आसान है। आप vue-cli का उपयोग करते हैं:

$ vue init nuxt/starter <project-name> 

यह सब आप सामान्य रूप से की जरूरत है (Vuex, रूटर, ..) के साथ आता है। बस ध्यान रखें कि यह कुछ फ़ोल्डर संरचना को लागू करता है, जिसे आपको पालन करना है।

Here स्टार्टर में शामिल आदेशों की सूची है।

"scripts": { 
    "dev": "nuxt", 
    "build": "nuxt build", 
    "start": "nuxt start", 
    "generate": "nuxt generate" 
} 

आप शायद ज्यादातर generate में iterested हो जाएगा जहां उसे

आवेदन निर्माण और एक HTML फ़ाइल (स्थिर होस्टिंग के लिए प्रयुक्त) के रूप में हर मार्ग उत्पन्न करते हैं।

यह भी ध्यान देने योग्य बात यह है कि परियोजना (इसे लिखने के समय) under active development और हम और अधिक शानदार सुविधाओं की उम्मीद कर सकते हैं!

+0

यह वही था जो मैंने उपयोग किया था। –

1

मैं कहूंगा कि आप ऐसा नहीं कर सकते क्योंकि Vue एक आभासी डोम का उपयोग करता है, यह HTML के लिए, लेकिन जावास्क्रिप्ट render functions जो आवश्यक है कुशलतापूर्वक डोम पैच करने के लिए जब डेटा अद्यतन किया जाता है के लिए खाका संकलन नहीं है।

मुझे यकीन है कि आप node जादू के साथ कुछ और करना चाहते हैं जो आप पार्स और आउटपुट फाइलों के लिए करना चाहते हैं, लेकिन यह कुछ ऐसा करने के लिए काफी बड़ा उपक्रम होगा जो केवल न्यूनतम प्रभाव होगा।

+0

हाँ, मुझे लगा कि Vue.js स्वयं ही ऐसा करने का टूल नहीं होगा। यह सिर्फ एकमात्र जगह है जिसे मैंने कभी-कभी एकल-फ़ाइल घटक देखा है, वू में है, इसलिए यह मेरा संदर्भ बिंदु है। –

2

आधिकारिक vuejs गाइड से:

आप Webpack का उपयोग कर रहे हैं, तो आप आसानी से prerender-spa-plugin साथ प्रीरेंडरिंग जोड़ सकते हैं। यह व्यापक रूप से वू ऐप्स के साथ परीक्षण किया गया है - और वास्तव में, निर्माता वू कोर टीम का सदस्य है।

संबंधित मुद्दे