vue+webpack引用外部js插件

骑猪看日落 2023-02-28 05:42 23阅读 0赞

## 1.引入js文件为自定义文件 ##

1、自定义公共JavaScript函数 util.js ,最后要使用 export \{funcName\} 的形式导出需要的函数

function fun1(){ 
    	//...
    }
    function fun2(){ 
    	//...
    }
    //导出声明的公共函数
    export { 
       fun1
    }

2、vue模板组件中使用引用的外部js函数，使用 import \{\} from ‘…/js/path’ 引用导出的js函数,方法中直接使用即可

<script>
    import { fun1} from '../assets/js/util.js'  //引入外部js中的函数
    export default{ 
    	data(){ 
    	 	return{ 
    		 
      		}
    	},
    	methods:{ 
    		aaa(){ 
    			fun1();
    		}
    	}
    }
    </script>

## 2.引入js为自执行匿名函数 ##

1.js文件

(function (doc, win) { 
       // ...
    })(document, window);

2.在vue组件模板中使用import引入外部自执行的js

import '../assets/js/xxx.js'  //引入外部匿名函数

## 3.引入js为第三方库 ##

第三库js如果为下载js文件，则该js文件需要放置入static文件夹下。  
否则在index.html中引入时控制台会报错：  
控制台（console）提示：**Uncaught SyntaxError: Unexpected token <**  
（1）assets用来放置样式、静态图片，只要src下面的组件中用到的资源就可以放在assets中。  
（2）static用来放没有npm包的第三方插件，字体等第三方文件。

参考链接：  
https://blog.csdn.net/zhouzuoluo/article/details/84781490  
https://blog.csdn.net/AI\_U20/article/details/87260596

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 idea从插件市场或者外部插件库导入插件的方式

我们平时在使用idea进行开发时，会用到一些插件来辅助开发或增强某些功能。选好合适的插件能帮助我们提高开发效率，事半功倍。以下提供从idea内部自带的插件市场下载插件和从i

淡淡的烟草味﹌/ 2023年09月26日 18:09/ 0 赞/ 315 阅读

相关 js插件

fullPage.js 全屏滚动，[官网][Link 1] highlight.js 代码高亮，[官网][Link 2] 预览效果，[针对Markdown][Ma

今天药忘吃喽~/ 2023年08月17日 16:16/ 0 赞/ 334 阅读

相关 vue引用外部js

工作中需要使用vue框架，有的时候npm能下载的js并不够于平时的开发，经常会有需要引用第三方js的时候出现，自己查了很多资料都没有一个很好的处理办法，偶然发现了一个

待我称王封你为后i/ 2023年08月17日 16:07/ 0 赞/ 213 阅读

相关 html引用外部js问题

同级目录下直接引用： <script type="text/javascript" src="test1.js"></script> js位于同级文件夹下：

╰半夏微凉°/ 2023年08月17日 15:45/ 0 赞/ 236 阅读

相关 vue+webpack引用外部js插件

1.引入js文件为自定义文件 1、自定义公共JavaScript函数 util.js ,最后要使用 export \{funcName\} 的形式导出需要的函数

骑猪看日落/ 2023年02月28日 05:42/ 0 赞/ 24 阅读

相关 vue引用外部js

新建一个js文件，如我的 export const list1 = [ { code: 'abc', id: 1 }, { code: 'de

红太狼/ 2022年12月27日 07:13/ 0 赞/ 293 阅读

相关 8、js插件之MagicZoom.js放大镜插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

傷城~/ 2022年06月15日 06:49/ 0 赞/ 461 阅读

相关 vue 项目引用（外部） js、css

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 我的工程结构： ![watermark_type_Z

ゝ一纸荒年。/ 2022年04月08日 15:23/ 0 赞/ 453 阅读

相关 C#插件的引用

C\插件的引用下面我们要在VS（使用版本为：Visual Studio 2015）中引用C\插件，首先需要找到本次需要引用的文件（FluentScheduler.dll

Dear 丶/ 2022年02月18日 09:34/ 0 赞/ 446 阅读

相关 vue项目中全局引用jquery 、引用外部js的多种方式（外部纯函数js、外部自执行js、外部js插件），附niceScroll滚动条插件使用

vue项目中全局引用jquery ： 1、“ npm install jquery --save ” 命令安装jquery 2、在项目根目录下的 build

╰半夏微凉°/ 2021年09月17日 04:04/ 0 赞/ 539 阅读