一、在 inde.html 中使用?script?標(biāo)簽來引入
1、直接引入，全局可用
ESLint 語法檢測會報(bào)錯(cuò)：'$' is not define
// index.html
<script src="./static/jquery.js"></script>// vue文件
export default {
mounted () {
/* eslint-disable */
console.log($)
}
}?
2、在 webpack 中配置一個(gè) externals，使用import來引入使用
ESLint 語法檢測不會報(bào)錯(cuò)
// 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 語法檢測不會報(bào)錯(cuò)
// 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 語法檢測會報(bào)錯(cuò)：'$' 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報(bào)錯(cuò)
項(xiàng)目開啟了 ESLint 語法檢測的話，會報(bào)一個(gè) error ：'$' is not defined。
1、在每一個(gè)使用 $ 的代碼行上加?/* eslint-disable */?，忽略該報(bào)錯(cuò)。文章來源：http://www.zghlxwxcb.cn/news/detail-439816.html2、在根目錄下的 .eslintrc.js 的rules{}中添加? 'no-undef': 0? 之后重啟編輯器即可解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-439816.html
到了這里，關(guān)于Vue 項(xiàng)目中引入本地第三方 JS 庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
