Vue 中如何引入第三方 JS 库，web前端开发视频

externals: {

‘jquery’: ‘jQuery’

}

这样，我们就可以在每一个组件中用 import 来引用这个 jquery 了。

import $ from ‘jquery’

export default {

created() {

console.log($)

}

}

控制台截图如下：

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

---

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

控制台截图：

OK，也是没有任何问题的

四、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’

})

]

这个时候，我们在项目中，就可以直接使用 $ 了。