web-dev-qa-db-fra.com

Importation d'un fichier javascript à utiliser dans le composant vue

Je travaille sur un projet nécessitant l'utilisation d'un plugin js. Maintenant que nous utilisons vue et que nous avons un composant pour gérer la logique basée sur le plug-in, je dois importer le fichier de plug-in js dans le composant vue afin d'initialiser le plug-in. 

Auparavant, cela était géré dans le balisage comme suit:

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

C'est ce que j'ai essayé, mais j'obtiens une erreur de compilation:

MonComponent.vue

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

export default {
    data: {

Ma question est la suivante: quelle est la bonne façon d’importer ce fichier javascript afin que je puisse l’utiliser dans mon composant vue? ...

javascriptimportecmascript-6vue.jsvuejs2
4
AnchovyLegend

Inclure un fichier JavaScript externe

Essayez d'inclure votre JavaScript (externe) dans le crochet monté de votre composant Vue.

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

Référence: Comment inclure une balise sur un composant Vue

Importer un fichier JavaScript local

Si vous souhaitez importer un code JavaScript local dans votre composant Vue, vous pouvez l'importer de la manière suivante:

MonComponent.vue

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

Supposons que la structure de votre projet ressemble à:

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

Et vous pouvez exporter des variables ou des fonctions dans mykey.js:

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

Pour les scripts que vous importez dans le navigateur (c'est-à-dire avec des balises), ils rendent généralement certaines variables disponibles globalement.

Pour ceux-ci, vous n'avez rien à importer. Ils seront juste disponibles.

Si vous utilisez quelque chose comme Webstorm (ou l'un des IDE JetBrains associés), vous pouvez ajouter /* global globalValueHere */ pour lui indiquer que "hé, ceci n'est pas défini dans mon fichier, mais il existe." Ce n'est pas obligatoire, mais cela fera disparaître les lignes sinueuses "indéfinies".

Par exemple:

/* global Vue */

c’est ce que j’utilise lorsque je retire Vue d’un CDN (au lieu de l’utiliser directement).

Au-delà, vous l'utilisez comme vous le feriez normalement.

0
samanime

essayez de télécharger ce script
import * from '{path}/mykey.js'.
ou script d'importation
<script src="//api.myplugincom/widget/mykey.js"></script>in<head>, utilisez une variable globale dans votre composant.

0
JJJ