vue.js टेम्पलेट में बाहरी स्क्रिप्ट सहित

मैं Vue.js और वेब-पैक में नया हूं, इसलिए मैंने प्रारंभिक एप्लिकेशन को मचान करने के लिए vue-cli (webpack) का उपयोग करने का निर्णय लिया। मैं एक टेम्पलेट में एक बाहरी स्क्रिप्ट (जैसे <script src="...") शामिल करने की कोशिश कर रहा हूं जिसे वैश्विक स्तर पर (प्रत्येक पृष्ठ/घटक के लिए) की आवश्यकता नहीं है, हालांकि वू चेतावनी देता है कि इसकी अनुमति नहीं है।vue.js टेम्पलेट में बाहरी स्क्रिप्ट सहित

<html lang="en"> 

<head> 
    <title>App</title> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

</head> 

<body> 
    <div id="app"></div> 

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 

</html>

मेरे App.vue भी उत्पन्न एक के समान है::

मेरे index.html फ़ाइल प्रारंभिक करने के लिए इसी तरह की एक उत्पन्न है

<template> 
<div id="app"> 

    <div class="container pt-5"> 
    <router-view></router-view> 
    </div> 

</div> 
</template>

मैं एक है मेरे मार्ग फ़ाइल में /upload पर मार्ग, जो एक अपलोड घटक को मानचित्र करता है जिसके लिए dropzone.js (बाहरी स्क्रिप्ट) की आवश्यकता होती है। मैं इसे अपने index.html में शामिल कर सकता हूं, इसी प्रकार बूटस्ट्रैप को कैसे लोड किया जाता है, हालांकि यह प्रत्येक पृष्ठ/घटक के लिए इसे लोड करने के लिए आदर्श से कम लगता है जब केवल इस घटक को इसकी आवश्यकता होती है।

लेकिन, जैसा कि ऊपर कहा गया है, मैं बस तोप यह मेरे टेम्पलेट फ़ाइल में इस तरह के रूप में शामिल हैं:

<template> 
<div> 
    <h2>Upload Images</h2> 
    <form action="/file-upload" class="dropzone"> 
    <div class="fallback"> 
     <input name="file" type="file" multiple /> 
     <input type="submit" value="upload" /> 
    </div> 
    </form> 
</div> 

<script src="https://example.com/path/to/dropzone"></script> 
</template> 

<script> 
export default { 
    data() { 
    return {} 
    } 
} 
</script> 

<style> 
</style>

मैं केवल एक घटक के लिए एक बाहरी स्क्रिप्ट कैसे शामिल कर सकता?

स्रोत

2017-07-17 Ashley B

स्क्रिप्ट टैग प्रकृति द्वारा वैश्विक हैं। टेम्पलेट में स्क्रिप्ट टैग सहित यह नहीं है कि आप मॉड्यूल सिस्टम (कम से कम अभी के लिए) के साथ कैसे करते हैं।

आप एनपीएम, npm install dropzone --save का उपयोग कर इसे नोड मॉड्यूल के रूप में स्थापित कर सकते हैं।

फिर इसे अपने घटक कोड के अंदर आयात करें।

import drozone from 'dropzone'; 
export default { 
    // Component code... 
}

हालांकि, ध्यान रखें कि बंडल हर पृष्ठ में dropzone में शामिल होंगे, जब तक आप webpack कोड बंटवारे सुविधा का उपयोग कर रहे हैं। वू राउटर के साथ अपने बंडल को विभाजित करने के बारे में एक आधिकारिक ट्यूटोरियल के लिए here देखें।

स्रोत

2017-07-17 13:31:28 Cobaltway

मुझे उम्मीद थी कि वहाँ एक रास्ता के रूप में ही संसाधन लोड करने के लिए किया जाएगा टेम्पलेट प्रस्तुत किया जाता है (वेबपैक के साथ कोड को विभाजित किए बिना) –

@AshleyB नहीं, आपको इसके लिए वेबपैक गतिशील आयात सुविधा का उपयोग करना चाहिए। – Cobaltway

जिसके लिए स्थानीय स्तर पर स्थापित ड्रॉपज़ोन की आवश्यकता है, क्या बाहरी संसाधन के रूप में इसका उपयोग करने का कोई तरीका नहीं है? –

आप एक विधि है कि स्क्रिप्ट लोड हो रहा है के लिए जिम्मेदार हो सकता है और नीचे की तरह घुड़सवार या बनाया हुक में यह फोन करेगा परिभाषित कर सकते हैं:

<script> 
     export default { 
     data() { 
      return {} 
     }, 
     methods: { 
      loadJs(url, callback) { 
      jQuery.ajax({ 
       url: url, 
       dataType: 'script', 
       success: callback, 
       async: true 
      }); 
      } 
     }, 
     mounted() { 
      this.loadJs('url_to_someScript.js', function() { 
      //Stuff to do after someScript has loaded 
      }); 
     } 
     } 
</script>

स्रोत

2017-07-17 13:49:06

कृपया इसे आज़माएं और मुझे बताएं कि यह आपके लिए काम कर रहा है या नहीं। –

यह काम करता है लेकिन 'विधि'' विधियों 'होना चाहिए। मैंने इसे संपादित करने की कोशिश की लेकिन यह आपको तब तक सहेजने नहीं देगा जब तक कि आप कम से कम 6 वर्णों को नहीं बदल देते। – Adam

vue.js टेम्पलेट में बाहरी स्क्रिप्ट सहित

उत्तर

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