Bao gồm tập lệnh bên ngoài trong mẫu vue.js

Tôi mới sử dụng Vue.js và web-pack, vì vậy tôi đã quyết định sử dụng vue-cli (webpack) để dàn dựng một ứng dụng ban đầu. Tôi đang cố gắng bao gồm một tập lệnh bên ngoài (ví dụ: <script src="...") trong một mẫu không cần thiết trên toàn cầu (cho mỗi trang/thành phần), tuy nhiên Vue cảnh báo rằng điều này không được phép.Bao gồm tập lệnh bên ngoài trong mẫu vue.js

file index.html của tôi cũng tương tự như ban đầu tạo ra một:

<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 cũng tương tự như tạo ra một:

<template> 
<div id="app"> 

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

</div> 
</template>

Tôi có một tuyến đường đến /upload trong tệp tuyến đường của tôi, ánh xạ tới thành phần Tải lên yêu cầu dropzone.js (tập lệnh bên ngoài). Tôi có thể bao gồm nó trong index.html của tôi, tương tự như cách bootstrap được tải, tuy nhiên nó có vẻ ít hơn lý tưởng để tải nó cho mỗi trang/thành phần khi chỉ thành phần này yêu cầu nó.

Tuy nhiên, như đã nói ở trên, tôi chỉ đơn giản là pháo bao gồm nó trong file template của tôi như vậy:

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

Làm thế nào tôi có thể bao gồm một kịch bản bên ngoài để chỉ có một thành phần?

Nguồn

2017-07-17 Ashley B

Thẻ tập lệnh có tính chất toàn cục. Bao gồm các thẻ script trong mẫu không phải là cách bạn làm với các hệ thống mô-đun (ít nhất là cho bây giờ).

Bạn có thể cài đặt nó làm mô-đun nút bằng cách sử dụng npm, npm install dropzone --save.

Sau đó, nhập mã đó bên trong mã thành phần của bạn.

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

Tuy nhiên, lưu ý rằng gói sẽ chứa dropzone trong mỗi trang trừ khi bạn đang sử dụng tính năng chia tách mã webpack. Xem here để biết hướng dẫn chính thức về cách tách gói của bạn với Bộ định tuyến Vue.

Nguồn

2017-07-17 13:31:28 Cobaltway

Tôi đã hy vọng rằng sẽ có một cách để chỉ tải các tài nguyên như mẫu được hiển thị (không có tách mã bằng gói webpack) –

@AshleyB Không, bạn nên sử dụng tính năng nhập web động cho điều đó. – Cobaltway

Điều đó đòi hỏi dropzone cài đặt cục bộ mặc dù, là không có bất kỳ cách nào để sử dụng nó như là một nguồn lực bên ngoài? –

Bạn có thể xác định một phương pháp mà sẽ chịu trách nhiệm kịch bản tải và gọi nó là ở cái móc gắn hoặc tạo ra như dưới đây:

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

Nguồn

2017-07-17 13:49:06

hãy thử điều này và cho tôi biết nếu nó làm việc cho bạn. –

Nó hoạt động nhưng 'phương thức' phải là' phương thức'. Tôi đã cố gắng chỉnh sửa nó nhưng nó sẽ không cho phép bạn tiết kiệm trừ khi bạn thay đổi tối thiểu 6 ký tự. – Adam

Bao gồm tập lệnh bên ngoài trong mẫu vue.js

Trả lời

Các vấn đề liên quan