Welche Möglichkeiten gibt es, js-Dateien in vue einzuführen?-js-Tutorial-php.cn

Welche Möglichkeiten gibt es, js-Dateien in vue einzuführen?

清浅

Freigeben： 2020-10-13 09:19:28

Original

39833 Leute haben es durchsucht

Welche Möglichkeiten gibt es, js-Dateien in vue einzuführen?

Mehrere Methoden zum Einführen von JS-Dateien in VUE-Projekte

Bei der Entwicklung von Vue-Projekten müssen Sie manchmal einige verwenden Nicht-ES6-Format-JS-Bibliotheken ohne Export können auf folgende Weise implementiert werden:

1. Verwenden Sie das Skript-Tag auf der index.html-Seite, um

einzuführen Natürlich können Sie auch die Adresse des CDN verwenden. Die so importierten Inhalte sind global und können überall genutzt werden.

<!DOCTYPE html>
 <html>
<head>
      <title>Map</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"/>
      <script src=&#39;./static/libs/three/three.min.js&#39;></script>
      <script src="./static/libs/three/GLTFLoader.js"></script>
   </head>
   <body>
     <p id="app"></p>
     <!-- built files will be auto injected -->
   </body></html>

Nach dem Login kopieren

2. Verwenden Sie window.moduleName in main.js. Verwenden Sie

oder fügen Sie es in Vue.prototype ein, damit es in der Komponente verwendet werden kann.

var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

Nach dem Login kopieren

3. Fügen Sie export

manuell zum Exportstandard { /**Methode zum Exportieren**/} für die Methoden hinzu, die in der js-Bibliothek verwendet werden müssen. und importieren Sie dann {*} aus Verwenden Sie

in der JS-Bibliothek:

function realconsole(){  
    alert("hello world!");  }  
 export {  
     realconsole }

Nach dem Login kopieren

In den Komponenten, die die JS-Bibliothek verwenden müssen:

import realconsole from &#39;./xxx&#39;

Nach dem Login kopieren

4 Die Importmethode zum Hinzufügen der erforderlichen Die Methode in der js-Bibliothek wird wie folgt an die globale

gemountet:

 import &#39;@static/libs/GLTFLoader&#39; 
 // 可以从全局获取导入的方法 
 let GLTFLoader = THREE.GLTFLoader

Nach dem Login kopieren

Verwandte Empfehlungen:

2020 Front-End Vue Zusammenfassung der Interviewfragen (mit Antworten)

Empfehlungen für Vue-Tutorials: 5 aktuelle Auswahl an Video-Tutorials für vue.js im Jahr 2020

Weitere Informationen zum Programmieren finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, js-Dateien in vue einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!