Vue.js - Vue 中如何引入第三方 JS 库(二)

二、绝对路径直接引入，配置后，import 引入后再使用

第一种方法有一个弊端就是：我们每一个使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，这显然是不方便的。

于是，我们有了第二种方法。

还是先在主入口页面 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($)
  }
}

控制台截图如下：

很好，没有任何问题，我们可以在这个组件中 随意的 任意的 多次的 来使用 $ 了。

OK，咱们已经介绍两种方式了，它们有一个共同点：都需要在主入口页面 index.html 中，用 script 标签来引入 JQuery。

如果你不想在 inde.html 中使用 script 标签来引入 JQuery 的话，我们还有方法。