jquery在线引入文件(jquery引用路径的讲解)

   日期:2022-02-24     文章发布:文章发布    网络转载:生活号    
核心提示:目前,在学习使用Vue2.0开发新的项目。然而目前用Vue实现的UI框架里面,尚未出现具有像bootstrap一样统治力的框架。一番纠结后,老夫... 那么问题来了,在Vue中如何引入jQuery和swiper呢? 经历半天搜索、比对、尝试之后,得出了下面的结论,单用webpack时设置同理。 引入jQuery 这个问度娘就有很多方案,我这里选取的是将jQuery暴露到全局的方式,这样就不用每个用...
移动站源标题:http://mip.818114.com/news/item-177196.html

目前,在学习使用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了。

最后

虽以上皆经过实战检验,但若有错误欢迎指正。

免责声明:本网部分文章和信息来源于互联网,本网转载出于传递更多信息和学习之目的,并不意味着赞同其观点或证实其内容的真实性,如有侵权请通知我们删除!(留言删除
 
 
更多>同类行业

同类新闻
最新资讯
最新发布
最受欢迎
网站首页  |  黄页  |  联系方式  |  信息  |  版权隐私  |  网站地图  |  API推送  |  网站留言  |  RSS订阅  |  违规举报  |  陇ICP备22000095号