Vue项目中如何引入本地第三方JS库
更新时间：2023年06月23日 09:21:13 作者：不怕麻烦的鹿丸
vue中常遇到第三方js,这篇文章主要给大家介绍了关于Vue项目中如何引入本地第三方JS库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
一、在 inde.html 中使用 script 标签来引入
1、直接引入，全局可用
ESLint 语法检测会报错：'$' is not define
// index.html <script src="./static/jquery.js"></script>
// vue文件
export default {
mounted () {
/* eslint-disable */
console.log($)
}
}2、在 webpack 中配置一个 externals，使用import来引入使用
ESLint 语法检测不会报错
// index.html <script src="./static/jquery.js"></script>
// webpack配置文件
externals: {
'jquery': 'jQuery'
}// vue文件
import $ from 'jquery'
export default {
mounted () {
console.log($)
}
}二、在webpack中配置 alias来引入
1、使用 import 引入使用
ESLint 语法检测不会报错
// webpack 配置文件
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery.js')
}
}// vue文件
import $ from 'jquery'
export default {
mounted () {
console.log($)
}
}2、不用import，但需在 webpack 配置 plugins
ESLint 语法检测会报错：'$' is not define
// webpack配置文件
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery.js')
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
]// vue文件
export default {
mounted () {
/* eslint-disable*/
console.log($)
}
}三、解决ESLint报错
项目开启了 ESLint 语法检测的话，会报一个 error ：'$' is not defined。
1、在每一个使用 $ 的代码行上加
/* eslint-disable */，忽略该报错。2、在根目录下的 .eslintrc.js 的rules{}中添加 'no-undef': 0 之后重启编辑器即可解决。
总结
到此这篇关于Vue项目中如何引入本地第三方JS库的文章就介绍到这了,更多相关Vue引入本地第三方JS库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue3如何在单个组件中实现类似mixin的事件调用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
vue-resource 拦截器interceptors使用详解
这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
图片和文件上传在很多项目中都可以使用的到，本文主要介绍了VUE+element-ui文件上传的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了validator自定义验证及易错点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
这篇文章主要介绍了Vue + element-ui 背景图片设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
WebStorm启动vue项目报错代码:1080 throw err解决办法
在使用webstorm新建vue项目时常会遇到一些报错,下面这篇文章主要给大家介绍了关于WebStorm启动vue项目报错代码:1080 throw err的解决办法,文中将解决办法介绍的非常详细,需要的朋友可以参考下2023-12-12
Avue是一个基于Vue.js的前端框架,它是由阿里云开发的一款企业级UI组件库,旨在提供一套全面、易用且高性能的界面解决方案本文介绍了Avue实现动态查询与数据展示的示例,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue-router定义元信息meta操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
最新评论