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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • adventureworksdw2008r2_种植项目实施方案示例范文

    adventureworksdw2008r2_种植项目实施方案示例范文在SQLServer2008的Analysis帮助的例子经常用到AdventureWorks多维数据库。需要按照下列步骤安装1.首先安装SQL2008.AdventureWorks_All_Databases.x86.msi2.下载AdventureWorks2008R2NovemberCTP,里面有AdventureWorks的项目,在vs2008中部署就可以了。C:\Pro…

    2022年9月11日
    0
  • Mybatis原理解析之一 SqlSessionFactory生产(源码解析)

    Mybatis原理解析之一 SqlSessionFactory生产(源码解析)缘起:笔者从业一年有余(此处撸撸胡须,摸摸自己半秃的头发)不经发出感叹:天天写ssm框架搭建下的业务框架,对于数据库操作也使用mybatis。但是扪心自问对于mybatis的使用只是停留在表层,从来没有研究过其原理,于是本着只有变秃才能变强的原则,于是准备研究一下mybatis的框架并再次做出记录。这里笔者对于mybatis的源码分析是在spring环境下进行的。这是笔者第一个研究的框架源…

    2022年6月3日
    69
  • HDU 4331 Image Recognition

    HDU 4331 Image Recognition

    2021年8月19日
    43
  • SQLSERVER 存储过程 语法

    SQLSERVER 存储过程 语法SQLSERVER存儲過程的寫法格式規格CodehighlightingproducedbyActiproCodeHighlighter(freeware)http://www.CodeHighlighter.com/–>******************************************************** author:Susan*** date:

    2022年7月17日
    13
  • 详解 ManualResetEvent(转)

    详解 ManualResetEvent(转)原文:http://www.cnblogs.com/li-peng/p/3291306.html今天详细说一下ManualResetEvent它可以通知一个或多个正在等待的线程已发生事件,允许线程通过发信号互相通信,来控制线程是否可心访问资源当一个线程开始一个活动(此活动必须完成后,其他线程才能开始)时,它调用Reset以将ManualResetEvent置于非终止状…

    2022年7月18日
    10
  • 阿里,B站小伙伴刚刚分享的大数据开发运维学习规划,抓紧收藏

    一.大数据运维与架构课程体系1.0课程与老师介绍本课程是专门培养大数据运维与架构方向专业人才的体系化课程。课程所有讲师小伙伴全部是在职的知名企业大数据开发专家,大数据技术专家职位员工,非专门的培训机构老师(小伙伴当前在职企业阿里巴巴,哔哩哔哩,平安集团,苏宁易购,美团等,运维集群规模大到10000+节点,课程内容可以满足市面上80%以上企业的大数据运维工作)。课程以企业大数据集群运维实战和招聘需求为出发点,深入浅出,有重点地为大家系统化地讲解整个大数据运维需要的知识点,实战教学,多年运维经验分享

    2022年4月17日
    47

发表回复

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

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