首页 > 其他 > 详细

vue引入插件方法

时间:2019-10-08 19:05:31      阅读:206      评论:0      收藏:0      [点我收藏+]


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" /></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

vue引入插件方法

原文:https://www.cnblogs.com/zyl-930826/p/11636355.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!