vue引入插件方法



jQuery插件
npm install jquery --save-dev

需要用jQuery的文件中引入:
import $ from 'jquery'

轮播图插件
安装:npm install vue-awesome-swiper --save-dev

main.js中引入:
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper)

在需要的文件中使用:

 

<swiper :options="swiperOption">
          <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index"><img :src="item.img" alt="" /></swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
</swiper>

data() {
        return {
            slide: [{ img: require('@/assets/images/banner1.jpg')}, { img: require('@/assets/images/banner2.jpg')}, { img: require('@/assets/images/banner3.jpg')}],
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                autoplay: {
                    delay: 3000
                },
                loop: true,
                mousewheel: true
            },
        };
  },

 

设置浏览器标题(title)插件:

安装:npm install vue-wechat-title --save

main.js中引入:

import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle)

在需要的文件中使用:

加上下面这句话即可

<div v-wechat-title="首页--XX公司"></div>

 


js-cookie插件
npm install --save js-cookie


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM