vue使用外部js,vue.js引入
开发Vue项目时，有时需要使用一些不是ES6格式的，没有导出的js库。下面这篇文章主要介绍了将第三方JS库引入Vue的详细步骤，有需要的可以参考一下。
目录
首先，绝对路径直接导入，全局可用。二是直接导入绝对路径，导入后再使用。第三，别名在webpack中配置，然后在导入后使用。第四，插件在webpack中进行配置，无需导入即可在全球范围内使用。结论我们以jQuery为例来说明一下。
一、绝对路径直接引入，全局可用
主门户页面index.html用脚本标签介绍：
脚本src=。/static/jquery-1 . 12 . 4 . js /脚本
这样，jQuery就已经可以在项目中使用了。
已安装(){
console.log($)
}
如您所见，我们可以正常打印出jQuery。
因为我的项目已经打开了ESLint检测，所以它还会报告一个警告[: $ 未定义。
我们可以要求ESLint不要检查这一行：在添加/* eslint-disable */之后，我们不会报告那个警告。第二，直接引入绝对路径。配置后，使用导入后第一种方法有一个弊端：每一个我们使用$的地方都要加上/* eslint-disable */，明显不方便。
所以，我们有第二种方法。
二、绝对路径直接引入，配置后，import 引入后再使用
或者先在主门户页面index.html用脚本标签介绍一下：
脚本src=。/static/jquery-1 . 12 . 4 . js /脚本
然后，我们可以在webpack中配置一个externals。
外部：{
jquery: jQuery
}
这样，我们可以使用import在每个组件中引用这个jquery。
从“jquery”中导入$
导出默认值{
已创建(){
console.log($)
}
}
这样，我们可以使用import在每个组件中引用这个jquery。如果你不想用脚本标签在inde.html引入jQuery，我们还有一个办法。
三、webpack中配置 alias，import 引入后再使用
我们不需要将jQuery引入主入口文件index.html。我们只需要在webpack的配置文件中为jQuery添加一个别名[ alias]并解析即可。
解决：{
扩展名：[。js ，。vue ，。json]，
别名：{
@: resolve(src )，
“jquery”:resolve(“static/jquery-1 . 12 . 4 . js”)
}
}
然后，我们可以通过导入的方式在任何组件中使用jquery。
脚本
从“jquery”中导入$
导出默认值{
名称：“应用程序”，
已创建(){
console.log($)
}
}
/脚本
控制台屏幕截图：
四、webpack 中配置 plugins，无需 import 全局可用
在第三个的基础上，如果我们添加一个插件配置，那么我们就可以不用从‘jQuery’导入$就可以使用它了。
解决：{
扩展名：[。js ，。vue ，。json]，
别名：{
@: resolve(src )，
“jquery”:resolve(“static/jquery-1 . 12 . 4 . js”)
}
},
插件：[
新网络包。提供插件({
$: jquery
})
]
这时，我们可以直接在项目中使用$了。
脚本
导出默认值{
名称：“应用程序”，
已创建(){
/* eslint-disable*/
console.log($)
}
}
/脚本
同样，因为我的项目使用eslint，所以我需要在使用$的代码前加上/* eslint-disable*/，以摆脱ESLint的检查，否则我会报错： $ 未定义。
结论
使用第一种和第四种方法时，不需要导入，直接全局可用；使用第二种和第三种方法时，需要先导入。
关于Vue引入第三方JS库的这篇文章到此为止。关于Vue中引入第三方JS库的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。