W tym skrypt zewnętrzny w szablonie vue.js

Jestem nowy w Vue.js i pakiecie internetowym, więc zdecydowałem się użyć vue-cli (webpacka), aby zarchiwizować początkową aplikację. Próbuję uwzględnić zewnętrzny szablon (np. <script src="...") w szablonie, który nie jest potrzebny globalnie (dla każdej strony/komponentu), jednak Vue ostrzega, że nie jest to dozwolone.W tym skrypt zewnętrzny w szablonie vue.js

Mój plik index.html jest podobny do początkowego wygenerowany:

<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 jest również podobny do generowanego One:

<template> 
<div id="app"> 

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

</div> 
</template>

mam trasa do /upload w pliku moich tras, który mapuje do komponentu Upload, który wymaga skryptu dropzone.js (skrypt zewnętrzny). Mogłabym umieścić go w moim pliku index.html, podobnie jak ładowanie programu ładującego, ale wydaje się, że nie jest to idealne, aby załadować go dla każdej strony/komponentu, gdy tylko ten komponent tego wymaga.

Jednakże, jak stwierdzono powyżej, po prostu armaty umieścić go w moim pliku szablonu jako takie:

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

Jak mogę zawierać skryptu zewnętrznego tylko dla jednego komponentu?

Źródło

2017-07-17 Ashley B

Tagi skryptów mają charakter globalny. Dołączenie tagów skryptów do szablonu nie jest tym, co robisz z systemami modułów (przynajmniej na razie).

Można go zainstalować jako moduł węzłowy za pomocą npm, npm install dropzone --save.

Następnie zaimportuj go do kodu komponentu.

Należy jednak pamiętać, że pakiet będzie zawierał zrzut ekranu na każdej stronie, chyba że używa się funkcji dzielenia kodu na pakiety internetowe. Zobacz here, aby uzyskać oficjalny samouczek dotyczący dzielenia pakietu na router Vue.

Źródło

2017-07-17 13:31:28 Cobaltway

Miałem nadzieję, że nie będzie to sposób na tylko załadować zasobu jako szablon jest renderowany (bez dzielenia kodu za pomocą pakietu WWW) –

@AshleyB Nie, powinieneś używać do tego funkcji dynamicznego importu Webpack. – Cobaltway

To wymaga jednak zainstalowania dropzone na miejscu, czy nie ma możliwości użycia go jako zewnętrznego źródła? –

Można zdefiniować metodę, która będzie odpowiedzialna za skryptu załadunku i nazwać go w zamontowany lub utworzony haku jak poniżej:

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

Źródło

2017-07-17 13:49:06

spróbuj tego i powiedz mi, czy to działa dla Ciebie. –

Działa, ale "metoda" powinna być "metodami". Próbowałem go edytować, ale nie pozwolę ci go zapisać, chyba że zmienisz co najmniej 6 znaków. – Adam

W tym skrypt zewnętrzny w szablonie vue.js

Odpowiedz

Powiązane problemy