vue.js şablonunda harici komut dosyası dahil

Vue.js ve web paketi için yeni oldum, bu yüzden vue-cli'yu (webpack) bir ilk uygulamayla iskeleye kullanmaya karar verdim. Global olarak gerekli olmayan bir şablona (her sayfa/bileşen için) bir dış komut dosyası (ör. <script src="...") eklemeye çalışıyorum, ancak Vue buna izin verilmediğini uyardı.vue.js şablonunda harici komut dosyası dahil

<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>

My App.vue de oluşturulur birine benzer:

My index.html dosyası bir üretilen baş harfi benzer

<template> 
<div id="app"> 

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

</div> 
</template>

bir bilgisi dropzone.js (harici bir komut dosyası) gerektiren bir Yükleme bileşeniyle eşleşen rotalarım yolunda /upload yolunu kullanın. Bunu, bootstrap'in nasıl yüklendiğine benzer şekilde index.html dizinine ekleyebilirim, ancak sadece bu bileşen gerektirdiğinde her sayfa/bileşen için yüklemek için idealden daha az görünüyor. Yukarıda belirtildiği gibi

Ancak, ben sadece topu gibi benim şablon dosyasına eklemektir:

<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>

nasıl sadece bir bileşen için harici bir komut dosyası içerebilir?

kaynak

2017-07-17 Ashley B

Komut dosyası etiketleri doğaya göre globaldir. Komut dosyası etiketini şablonda dahil etmek, modül sistemleriyle (en azından şimdilik) ne yaptığınızı değil.

Sen UÖM'sini, npm install dropzone --save kullanarak bir düğüm modül olarak yükleyebilirsiniz.

Daha sonra bileşen kodunuzun içine alın.

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

Ancak, webpack kod bölme özelliğini kullanmıyorsanız demeti, her sayfada dropzone içerecek unutmayın. Paketinizi Vue Router ile nasıl böleceğiniz hakkında bir resmi eğitim için bkz. here.

Senaryoda yüklenmesinden sorumlu ve aşağıdaki gibi monte veya oluşturulan kanca onu arayacak bir yöntem tanımlayabilirsiniz

kaynak

2017-07-17 13:31:28 Cobaltway

Sadece olarak yüklemek için bir yol olacağını umuyordum şablon işlenir (web paketi ile kod bölme olmadan) –

@AshleyB Hayır, bunun için webpack dinamik içe aktarma özelliğini kullanmalısınız. – Cobaltway

Bu, yerel olarak kurulmuş bir dropzone gerektirir, harici bir kaynak olarak kullanmanın bir yolu yok mu? –

<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>

kaynak

2017-07-17 13:49:06

lütfen bunu deneyin ve sizin için çalışıp çalışmadığını söyle. –

Çalışıyor, ancak 'yöntem' yöntemleri 'olmalıdır. Düzenlemeyi denedim ancak en az 6 karakter değiştirmediğiniz sürece kaydetmenize izin vermez. – Adam

vue.js şablonunda harici komut dosyası dahil

cevap

İlgili konular