在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
的例子,同理其他插件
也是可用同样的方法引入。虽以上皆经过实战检验,但若有错误欢迎指正。如果对你有帮助,那就点个赞呗。逃。 相关推荐
81463166 2020-07-17
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
不知道该写啥QAQ 2020-08-02
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
waterv 2020-07-18