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庫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue關于重置表單數據出現undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了安裝使用VUE的教程，本文給大家提到了遇到的問題原因分析及解決方法,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了Vue導出頁面為PDF格式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要給大家介紹了關于Vue記住滾動條和實現下拉加載的完美方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了Vue中自定義指令directive的使用方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-04-04
詳解vue項目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項目中如何引入全局sass/less變量、function、mixin，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue打包部署到Nginx時,css樣式不生效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關于vue3前端獲取文件的絕對路徑問題解決的相關資料,文中通過代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本文主要介紹了Vue.js中el-table表格自定義列控制與拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05