vue项目引入外部原生js文件_php引入文件的四个方法

vue项目引入外部原生js文件_php引入文件的四个方法在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的,可以在所有地方使用。<!DOCTYPEhtml><html> <head> <title>Map</title> <metacharset=”utf-8″> <meta

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

在开发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='./static/libs/three/three.min.js'></script>
      	<script src="./static/libs/three/GLTFLoader.js"></script>
   	</head>
   <body>
     	<div id="app"></div>
     	<!-- built files will be auto injected -->
   </body>
</html>

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

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

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

3.手动添加export

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

在JS库中:

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

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

import realconsole from './xxx'

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

如下:

 import '@static/libs/GLTFLoader' 
 // 可以从全局获取导入的方法 
 let GLTFLoader = THREE.GLTFLoader
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/184559.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • AMC7135_sip soc

    AMC7135_sip soc7.4SiamFC学习目标 目标 知道SiamFC的网络结构特点 掌握SiamFC的网络训练方式 应用 无 任意对象跟踪的问题是通过仅仅在线地学习对象外观的模型来解决,使用视频本身作为唯一的训练数据。尽管这些方法取得了成功,但他们的在线方法本质上限制了他们可以学习的模型的丰富性。需要跟踪的目标是通过起始帧的选择框给出的。框中可能是任意物体,甚至只是物体的某个部分。由于给定跟踪目标的不确定性,我们无法做到提前准备好数据,并且训练出一个.

    2022年10月1日
    2
  • Druid连接池监控的两个坑

    Druid连接池监控的两个坑阿里的Druid大家都知道是最好的连接池,其强大的监控功能是我们追求的重要特性。但在实际情况中也有不少坑,说下最近遇到的一个坑吧!问题1:不断打印error级别的错误日志sessionipchangetoomany下面是其报错的关键源码com.alibaba.druid.support.http.stat.WebSessionStat#addRemoteAddre…

    2022年7月23日
    9
  • OLED接口定义

    OLED接口定义总是忘记引脚定义,在这里记录下

    2022年5月22日
    40
  • Windows Azure服务购买,收费,使用注意事项及学习资料推荐

    Windows Azure服务购买,收费,使用注意事项及学习资料推荐近来,QQ群里不少朋友比较关注WindowsAzure,然而又仿佛不知道怎么入手。怎么开始开发,部署这些是技术细节,相信难不倒大家,但是如何购买服务以及收费这些东西确实模模糊糊的。这一方面是因为中文资料太少,WindowsAzure的入口网站也比较模糊,很多人找不到,更重要的是微软还没有正式对大陆开放。据说,曾经微软准备在大陆建一个数据中心,由于某些原因最后选择…

    2022年10月5日
    1
  • navicat15.0激活码【2021最新】「建议收藏」

    (navicat15.0激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月26日
    458
  • 38款 流媒体服务器开源软件

    38款 流媒体服务器开源软件Flash流媒体服务器Red5Red5是一个采用Java开发开源的Flash流媒体服务器。它支持:把音频(MP3)和视频(FLV)转换成播放流;录制客户端播放流(只支持FLV);共享对象;现场直播流发布;远程调用。Red5使用RSTP作为流媒体传输协议,在其自带的一些示例中演示了在线录制,flash…更多Red5信息最近更新:Red51.0.1

    2022年5月2日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号