Quelles sont les façons d'introduire des fichiers js dans vue-js tutoriel-php.cn

Quelles sont les façons d'introduire des fichiers js dans vue

清浅

Libérer： 2020-10-13 09:19:28

original

39787 Les gens l'ont consulté

Quelles sont les façons d'introduire des fichiers js dans vue

Plusieurs méthodes d'introduction de fichiers JS dans les projets VUE

Lors du développement de projets Vue, vous devez parfois utiliser Certains Les bibliothèques js au format non ES6 sans exportation peuvent être implémentées des manières suivantes :

1. Utilisez la balise script sur la page index.html pour introduire

. Bien sûr, vous pouvez également utiliser l'adresse du cdn. Le contenu ainsi importé est global et peut être utilisé partout.

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

Copier après la connexion

2. Utilisez window.moduleName dans main.js. Utilisez

ou placez-le dans Vue.prototype, afin qu'il puisse être utilisé dans le composant.

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

Copier après la connexion

3. Ajoutez manuellement export

dans export default { /**Méthode d'exportation**/} pour les méthodes qui doivent être utilisées dans la bibliothèque js, puis importez {*} depuis Use

dans la bibliothèque JS :

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

Copier après la connexion

Dans les composants qui doivent utiliser la bibliothèque JS :

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

Copier après la connexion

4. la méthode d'importation pour ajouter le requis La méthode dans la bibliothèque js est montée sur le

global comme suit :

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

Copier après la connexion

Recommandations associées :

Vue front-end 2020Résumé des questions d'entretien (avec réponses)

Recommandations du didacticiel Vue : 5 dernières sélections de didacticiels vidéo vue.js en 2020

Plus Pour des connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!