在项目中引入了vue.js文件,才可以创建Vue实例,vue 引入文件

　　在vue中，如果所有的代码都写在一个页面中，有时很难找到，而且很复杂。以下文章主要介绍将JS文件引入VUE项目的相关信息，通过示例代码进行详细介绍。有需要的朋友可以参考一下。

　　:

目录

　　 1.使用脚本标记来介绍index.html第2页。在main.js 3中使用window.moduleName。手动添加导出4。使用导入方法将所需js库中的方法挂载到全局补充：Vue3如何引用全局js文件进行汇总？开发Vue项目时，有时需要使用一些没有导出的非ES6格式的JS库，可以实现如下：

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

　　当然也可以用cdn的地址。这种引入的内容是全球性的，可以在任何地方使用。

　　！声明文档类型

　　超文本标记语言

　　头

　　标题图/标题

　　meta charset=utf-8

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　link rel=快捷图标 type=image/x-icon href=。/static/img/favicon . ico rel= external no follow /

　　脚本src=。/static/libs/three/three . min . js /script

　　脚本src=。/static/libs/three/gltf loader . js /script

　　/头

　　身体

　　div id=app/div

　　！-生成的文件将被自动注入-

　　/body

　　/html

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

　　也可以放入Vue.prototype，这样就可以在所有组件中使用。

　　var三=窗口。三

　　var GLTFLoader=THREE。GLTFLoader

　　三=三

3.手动添加export

　　为要在js库中使用的方法设置导出默认值{/* * method to export * */}，然后通过import {*} from使用它。

　　在JS库中：

　　函数realconsole(){

　　alert(hello world！);

　　}

　　导出{

　　真实控制台

　　}

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

　　从“”导入realconsole。/xxx

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

　　如下所示：

　　导入“@static/libs/GLTFLoader”

　　//导入的方法可以全局获取。

　　设GLTFLoader=三。GLTFLoader

补充：Vue3如何引用全局JS文件

　　一、如何引用全局JS文件

　　1.先创建一个JS文件放在常用目录下，随意写一些内容。文件命名为util.js(随意命名)。

　　//方法体

　　函数显示(){

　　Console.log(我是考js )；

　　}

　　//导出

　　导出默认值{

　　显示：显示

　　}

　　2、在main.js中引用，这里Vue3和之前的版本就有所不同

　　以前Vue版本的参考资料：

　　//介绍js文件

　　从“Common/Js/util.js”导入util

　　Vue.prototype. $ util=util

　　而Vue3引用如下：

　　//引用js文件

　　从“@/Common/Js/util.js”导入实用工具

　　app . config . global properties . $ util=util；

　　调用方法没有变，仍然是：

　　这个。$ util . show()；

总结

　　这就是这篇关于将JS文件引入VUE项目的文章。有关将JS文件引入VUE的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。