如何在vue中引入第三方jquery,swiper等库(一)
来源:互联网 发布:淘宝大卖家如何放单 编辑:程序博客网 时间:2024/05/22 14:56
以前习惯性是引用jQuery,bootstrap。。。库,但是不会引用,怎么办?
npm install swiper--save-dev (或者 npm install jquery -D)
一 .引入swiper(全局,局部)
- 方法一:全局引入,也是最暴力的,但是也是有好处坏处(同时加载,但是不能保证同时下载)
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet"><script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
组件中可以直接使用的swiper了
_initSwiper() { const container = this.$refs.swiper; const config = { effect: 'coverflow', slidesPerView: 'auto', centeredSlides: true, initialSlide: this.activeIndex, loop: true, autoplay: 1000, speed: 1000, coverflow: { rotate: 0, stretch: -30, depth: 100, modifier: 0.7, slideShadows: false, }, }; this.mySwiper = new Swiper(container, config);}
2.方法二:main.js 中
import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';
执行上面的_initSwiper()的方法 即可
3.方法三:局部的引入的,有时只想的单个组件中使用某一个的库,方法如下
<section ref="swiper" class="swiper-container"> <div class="swiper-wrapper"> <div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"></div> </div></section><script> let swiperAsync = import('swiper') //引入的swiper.js(node_modules)的方法 export default { data(){ return { colorList: ['red', 'yellow', 'gray', 'pink'] } }, methods: { async _initSwiper() { let Swiper = await swiperAsync; //异步加载的 const container = this.$refs.swiper; //ref='swiper' const config = { //swiper的参数配置 effect: 'coverflow', slidesPerView: 'auto', centeredSlides: true, initialSlide: this.activeIndex, loop: true, autoplay: 1000, speed: 1000, coverflow: { rotate: 0, stretch: -30, depth: 100, modifier: 0.7, slideShadows: false, }, }; this.mySwiper = new Swiper(container, config); }, }, mounted(){ this._initSwiper(); } }</script><style lang="scss" scoped> /*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/ @import '../../node_modules/swiper/dist/css/swiper.min.css';</style>
二 引入的jquery的方法
- 全局的方法
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
组件中可以直接使用的 ‘$’的方法
- 局部的方法:
npm install jquery -D
需要使用的组件中引入
import $ from 'jquery'
阅读全文
0 0
- 如何在vue中引入第三方jquery,swiper等库(一)
- 如何在vue中引入第三方jquery,swiper等库(二)
- Vue 中如何引入第三方 JS 库
- 如何在 Vue.js 中使用第三方库
- 如何在 Vue.js 中使用第三方库
- 在vue中引入jquery
- 如何在Android项目中引入第三方JAR包
- VUE引入第三方插件
- angular2_引入第三方文件之swiper的引入
- 在unity3d中引入第三方dll
- Vue系列——在vue项目中使用jQuery及其第三方插件
- vue项目中如何引入jquery
- 在vue中引入jQuery的方法
- 在 Vue.js 中使用任意 JavaScript 第三方库
- 在 Vue.js 中使用任意 JavaScript 第三方库
- vue引入swiper插件
- android studio如何引入第三方库(.jar)
- egret如何引入puremvc第三方库
- P3776工资管理
- java按指定时间拆分月份
- Azkaban使用简单笔记
- lombok的使用和原理
- 关于freemaker页面静态化的使用
- 如何在vue中引入第三方jquery,swiper等库(一)
- 2. Caffe依赖包解析
- mysql中的exists与in浅析
- <mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的一个问题
- 实现上拉出现抽屉的功能
- Spark应用程序创建并在集群上运行
- HTML5的本地存储
- Android OpenGLES2.0(十二)——FBO离屏渲染
- java static介绍