Rumah > hujung hadapan web > tutorial js > vue引入js文件有哪几种方法

vue引入js文件有哪几种方法

清浅
Lepaskan: 2020-10-13 09:19:28
asal
39954 orang telah melayarinya

vue引入js文件有哪几种方法

VUE项目中引入JS文件的几种方法

在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现:

1.在index.html页面使用script标签引入

当然也可以使用cdn的地址。这样引入后的内容是全局的,可以在所有地方使用。

<!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>
Salin selepas log masuk

2.在main.js中使用window.moduleName 使用

也可以放入Vue.prototype中,这样组件内都可以使用。

var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE
Salin selepas log masuk

3.手动添加export

为js库中需要使用的方法放入export default { /**要导出的方法**/},然后通过import {*} from 使用

在JS库中:

function realconsole(){  
    alert("hello world!");  }  
 export {  
     realconsole }
Salin selepas log masuk

在需要使用JS库的组件中:

import realconsole from &#39;./xxx&#39;
Salin selepas log masuk

4. 使用import方式,把需要的js库中的方法挂载到全局

如下:

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

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程入门!!

Atas ialah kandungan terperinci vue引入js文件有哪几种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan