在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引用其JSCSS,但每个用到的页面都需要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的例子,同理
其他插件也是可用同样的方法引入。虽以上皆经过实战检验,但若有错误欢迎指正。如果对你有帮助,那就点个赞呗。逃。

    原文作者:BUG来
    原文地址: https://segmentfault.com/a/1190000010033481
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞