web-dev-qa-db-fra.com

Ajout de script externe dans le modèle vue.js

Nouveau pour Vue.js et Web-Pack, j'ai donc décidé d'utiliser le vue-cli (Webpack) pour échafauder une application initiale. J'essaie d'inclure un script externe (par exemple <script src="...") dans un modèle qui n'est pas nécessaire de manière globale (pour chaque page/composant), cependant, Vue avertit que cela n'est pas autorisé.

Mon fichier index.html est similaire au fichier initial généré:

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

Mon App.vue est également similaire à celui généré:

<template>
<div id="app">

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

</div>
</template>

J'ai un itinéraire vers /upload dans mon fichier itinéraires, qui correspond à un composant de téléchargement qui nécessite dropzone.js (un script externe). Je pourrais l'inclure dans mon fichier index.html, de la même manière que le chargement d'amorçage, mais il semble moins qu'idéal de le charger pour chaque page/composant lorsque seul ce composant le requiert. 

Cependant, comme indiqué ci-dessus, je peux simplement l'inclure dans mon fichier de modèle en tant que tel:

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

Comment puis-je inclure un script externe pour un seul composant? 

javascriptvue.jsvuejs2vue-component
6
Ashley B

Vous pouvez définir une méthode qui sera responsable du chargement du script et l'appeler via le hook monté ou créé, comme ci-dessous:

<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>
2
Kamga Simo Junior

Les balises de script sont globales par nature. Inclure la balise scripts dans le modèle n’est pas ce que vous faites avec les systèmes de modules (du moins pour le moment).

Vous pouvez l'installer en tant que module de noeud à l'aide de npm, npm install dropzone --save.

Puis importez-le dans votre code de composant.

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

Cependant, sachez que le paquet contient dropzone dans chaque page, sauf si vous utilisez la fonctionnalité de fractionnement de code Webpack. Voir ici pour un tutoriel officiel sur la division de votre forfait avec Vue Router.

1
Cobaltway