现在,在学习运用Vue2.0开发新的项目。但是现在用Vue完成的UI结构里边,没有呈现具有像bootstrap相同统治力的结构。一番纠结后,老夫…
那么问题来了,在Vue中怎样引进jquery和swiper呢?
阅历半响查找、比对、测验之后,得出了下面的定论,单用 webpack 时设置同理。
引进jQuery
这个问度娘就有许多计划,我这儿选取的是将jQuery露出到大局的方法,这样就不必每个用到的当地都要import一次
装置 jQuerynpm i -S jQuery //等同于 npm install –save jQuery
设置 webpack.config.jsvar webpack = require(‘webpack’)
const ProvidePlugin = new webpack.ProvidePlugin({//引进外部类库
$: ‘jquery’,
jQuery: ‘jquery’,
});
module.exports = {
…
plugins: [
ProvidePlugin,
],
…
}
关于web前端学习不明白的,或许不知道怎样学习的能够来我的前端群477149581,源码已上传群文件,不论你是小白仍是大牛,小编都欢迎,群不定期共享干货,欢迎初学和进阶中的小伙伴。
至此,可大局运用了解的$符号了。
更多方法
运用 exports-loader
设置 externals(概况参阅引荐答案)
一般 import(也便是接下来要说的方法)
引进swiper插件
原本设置externals后再在index.html中引证的方法也是挺好的,但在我的项目中只要一个页面用到,并且externals方法不知怎样设置css(还望高人点拨),故挑选一般import的方法。
此法无需在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了。
最终
虽以上皆通过实战查验,但若有过错欢迎纠正。
