脚本宝典收集整理的这篇文章主要介绍了在Vue/webpack引入第三方插件jQuery/swiper：简单易行，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

写在前面

日前，在学习使用Vue2.0开发新的项目。然而目前用Vue实现的UI框架里面，尚未出现具有像bootstrap一样统治力的框架。一番纠结后，老夫抄起家伙就是一梭...

那么问题来了，在Vue中如何引入jQuery和swiPEr呢？

经历半天搜索、比对、尝试之后，得出了下面的结论，单用 webpack 时设置同理。

引入jQuery

这个问度娘就有很多方案，我这里选取的是将jquery暴露到全局的方式，这样就不用每个用到的地方都要import一次

安装 jQuery

npm i -s jQuery //等同于 npm install --save jQuery

设置 webpack.config.js

VAR webpack = require('webpack')
const PRovidePlugin = new webpack.ProvidePlugin({//引入外部类库
  $: 'jquery',
  jQuery: 'jquery',
});
module.exports = {
...
plugins: [
    ProvidePlugin,
  ],
...
}

至此，可全局使用熟悉的$符号了。

更多办法

• 使用 exports-loader（按照官方例子实测，配置简单成谜，然而无效，求指点）
• 设置 externals（详情参考推荐答案）
• 普通 import（也就是接下来要说的办法）

引入swiper插件

本来设置externals后再在index.htML中引用的办法也是挺好的，但在我的项目中只有一个页面用到，而且externals方式不知如何设置css（还望高人指点），故选择普通import的方式。

vue-awesome-swiper的使用可以参考 这篇文章

此法无需在index.html引用其JS或CSS，但每个用到的页面都需要import一次，jQuery也可用此法引入。

简单粗暴import

在 script 中 import 其js文件

import Swiper From '../assets/lib/swiper-3.4.2.min.js'

在 style 中 @import 其css文件

@import '../assets/lib/swiper-3.4.2.min.css';

至此，可以像往常一样使用又爱又恨的swiper了。

最后

这里只举了jq和swiper的例子，同理其他插件也是可用同样的方法引入。虽以上皆经过实战检验，但若有错误欢迎指正。如果对你有帮助，那就点个赞呗。逃。

脚本宝典总结

以上是脚本宝典为你收集整理的在Vue/webpack引入第三方插件jQuery/swiper：简单易行全部内容，希望文章能够帮你解决在Vue/webpack引入第三方插件jQuery/swiper：简单易行所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。