Vue中引入第三方JS库的四种方式
时间：2022-12-14 10:28:28 | 栏目：vue | 点击：次
我们以 jQuery 为例，来讲解
一、绝对路径直接引入，全局可用
主入口页面 index.html 中用 script 标签引入：
<script src="./static/jquery-1.12.4.js"></script>
这样，其实就已经可以在项目中使用 jQuery 了。
mounted () {
console.log($)
}
可以看到，我们是可以正常打印出 jQuery 的。
由于我的项目开启了 ESLint 检测，所以也会报一个 warning[警告] ：'$' is not defined 。
我们可以让 ESLint 不检查这一行： 加了 /* eslint-disable */ 以后，就不会报那个警告了。 二、绝对路径直接引入，配置后，import 引入后再使用 第一种方法有一个弊端就是：我们每一个使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，这显然是不方便的。
于是，我们有了第二种方法
二、绝对路径直接引入，配置后，import 引入后再使用
还是先在主入口页面 index.html 中用 script 标签引入：
<script src="./static/jquery-1.12.4.js"></script>
然后，我们可以在 webpack 中配置一个 externals
externals: {
'jquery': 'jQuery'
}
这样，我们就可以在每一个组件中用 import 来引用这个 jquery 了。
import $ from 'jquery'
export default {
created() {
console.log($)
}
}
这样，我们就可以在每一个组件中用 import 来引用这个 jquery 了。 如果你不想在 inde.html 中使用 script 标签来引入 jQuery 的话，我们还有方法
三、webpack中配置 alias，import 引入后再使用
我们不需要在主入口文件 index.html 中引入 jQuery 。我们只需要在 webpack 的配置文件中，在 resolve 中为 jQuery 添加一个 alias[别名] 。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery-1.12.4.js')
}
}
那么，我们就可以在任意组件中，通过 import 的方式来使用 jquery 了。
<script>
import $ from 'jquery'
export default {
name: 'app',
created() {
console.log($)
}
}
</script>
控制台截图：
四、webpack 中配置 plugins，无需 import 全局可用
在第三种的基础上，如果我们增加一个 plugins 的配置，那么，我们在使用的时候，无需 import $ from 'jquery' 也可以。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery-1.12.4.js')
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
]
这个时候，我们在项目中，就可以直接使用 $ 了。
<script>
export default {
name: 'app',
created() {
/* eslint-disable*/
console.log($)
}
}
</script>
同理，由于我的项目使用了 ESLint ，所以需要在使用了 $ 的代码前添加 /* eslint-disable*/ 来去掉 ESLint 的检查，否则会报错：'$' is not define
结论
第一种和第四种方式使用的时候，不需要 import ，全局直接可用；第二种和第三种方式使用的时候，需要先 import 。