it-swarm.com.de

Importieren der Javascript-Datei zur Verwendung in der Vue-Komponente

Ich arbeite an einem Projekt, das die Verwendung eines js-Plugins erfordert. Da wir nun vue verwenden und eine Komponente für die Plugin-basierte Logik haben, muss ich die js-Plugin-Datei in der vue-Komponente importieren, um das Plugin zu initialisieren. 

Bisher wurde dies im Markup wie folgt behandelt:

<script src="//api.myplugincom/widget/mykey.js
"></script>

Das habe ich versucht, aber ich bekomme einen Fehler bei der Kompilierung:

MyComponent.vue

import Vue from 'vue';
import * from  '//api.myplugincom/widget/mykey.js';

export default {
    data: {

Meine Frage ist: Wie importiere ich diese Javascript-Datei, damit ich sie in meiner Vue-Komponente verwenden kann? ...

4
AnchovyLegend

Fügen Sie eine externe JavaScript-Datei ein

Versuchen Sie, Ihr (externes) JavaScript in den eingebauten Haken Ihrer Vue-Komponente aufzunehmen.

<script>
export default {
  mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
      "src",
      "//api.myplugincom/widget/mykey.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};
</script>

Referenz: So fügen Sie ein Tag in eine Vue-Komponente ein

Importieren Sie eine lokale JavaScript-Datei

Falls Sie ein lokales JavaScript in Ihre Vue-Komponente importieren möchten, können Sie es folgendermaßen importieren:

MyComponent.vue

<script>
export default {
  import * as mykey from '../assets/js/mykey.js'
}
</script>

Angenommen, Ihre Projektstruktur sieht folgendermaßen aus:

src
- assets
    - js
      - mykey.js
- components
    MyComponent.vue

Sie können Variablen oder Funktionen in mykey.js exportieren:

export let myVariable = {};
export const MY_CONST = 1;
export function myFoo() {
    console.log('Hello.');
}
6
Yuci

Bei Skripten, die Sie in den Browser einbinden (d. H. Mit Tags), machen sie normalerweise einige Variablen global verfügbar.

Für diese müssen Sie nichts importieren. Sie werden nur verfügbar sein.

Wenn Sie etwas wie Webstorm (oder eine der verwandten JetBrains-IDEs) verwenden, können Sie /* global globalValueHere */ hinzufügen, um darauf hinzuweisen, dass "dies nicht in meiner Datei definiert ist, aber vorhanden ist." Es ist nicht erforderlich, aber es werden die "undefinierten" Schnörkellinien verschwinden.

Zum Beispiel:

/* global Vue */

ist das, was ich verwende, wenn ich Vue von einem CDN herunterziehe (anstatt es direkt zu verwenden).

Darüber hinaus verwenden Sie es wie gewohnt.

0
samanime

versuchen Sie, dieses Skript herunterzuladen
import * from '{path}/mykey.js'.
oder ein Skript importieren
<script src="//api.myplugincom/widget/mykey.js"></script>in <head>, verwenden Sie die globale Variable in Ihrer Komponente.

0
JJJ