vue常用插件

一、轮播图-------vue-awesome-swiper

安装：npm install vue-awesome-swiper --save
① vue中使用：

• 全局使用

mport Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

• 在组件中使用

import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

HTML/JS用法

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
 
<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
      setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    }
  }
</script>

② next.js中使用

• 全局使用
  1、在 plugins 文件夹下新建文件 vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
 
Vue.use(VueAwesomeSwiper)

2、在 nuxt.config.js 文件中配置插件

css: [
    '@/assets/css/swiper.css'
  ],
  plugins: [
   { src: "~/plugins/vue-awesome-swiper.js", ssr: false }
  ]

• 在组件中使用
  不需要新建文件也不要配置文件，直接在组件中使用，nuxt项目中，swiper只在浏览器端引入使用，且是require形式，因为import只能写在最外层

import Vue from 'vue'

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

export default{
	data(){
		//...
	}
}

HTML/JS写法：

<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
  <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // some swiper options...
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.banners.push('/4.jpg')
        console.log('banners update')
      }, 3000)
      console.log(
        'This is current swiper instance object', this.mySwiper, 
        'It will slideTo banners 3')
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

<style>
	@import "@/assets/css/swiper.css";
</style>

二、页面滚动加载动画--------vue-wow

安装：npm install vue-wow --save
npm地址：https://www.npmjs.com/package/vue-wow
vue-wow的使用需要引入animate.css文件，因为其动画效果皆由animate.css提供。
①vue中使用
1、main.js

// import
import Vue from 'vue'
import "animate.css"
import VueWow from 'vue-wow';
 
// mount with global
Vue.use(VueWow)

2、HTML/JS写法

  <u-animate-container>
    <u-animate
      name="fadeIn"
      delay="0s"
      duration="1s"
      :iteration="1"
      :offset="0"
      animateClass="animated"
      :begin="false" 
    >
      测试
    </u-animate>
  </u-animate-container>
</template>

// mount with component
import {UAnimateContainer, UAnimate} from 'vue-wow'
 
export default {
data () {
      return {
        
      }
    } ,
  components: {
    UAnimateContainer,
    UAnimate
  }
}

②next.js中使用
1、在 plugins 文件夹下新建文件 vue-wow.js

import Vue from 'vue'
import VueWow from 'vue-wow'
 
// mount with global
Vue.use(VueWow)

2、在 nuxt.config.js 文件中配置插件

css: [
    '@/static/css/animate.min.css'
  ],
  plugins: [
   { src: "~/plugins/vue-wow.js", ssr: false }
  ]

HTML/JS写法:

<template>
  <u-animate-container>
    <u-animate
      name="fadeIn"
      delay="0s"
      duration="1s"
      :iteration="1"
      :offset="0"
      animateClass="animated"
      :begin="false" 
    >
      测试
    </u-animate>
  </u-animate-container>
</template>
<script>
  export default {
    data () {
      return {
        
      }
    } 
  }
</script>

三、懒加载-----vue-lazyload

安装：npm install vue-lazyload --save
npm地址：https://www.npmjs.com/package/vue-lazyload
① vue中使用

• main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3, //预加载的宽高比
  error: 'dist/error.png', //图片加载失败时使用的图片源
  loading: 'dist/loading.gif', //图片加载的路径
  attempt: 1 //尝试加载次数
})
 
new Vue({
  render: h => h(App),
}).$mount('#app')

• 在模板中简单使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

②nuxt.js中使用

• 全局使用
  1、在 plugins 文件夹下新建文件 vue-lazyload.js

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3, //预加载的宽高比
  error: 'dist/error.png', //图片加载失败时使用的图片源
  loading: 'dist/loading.gif', //图片加载的路径
  attempt: 1 //尝试加载次数
})

2、在 nuxt.config.js 文件中配置插件

  plugins: [
   { src: "~/plugins/vue-lazyload.js" ,ssr: false}
  ]

• 在组件中使用
  不需要新建文件也不要配置文件，直接在组件中使用
  1、组件中引入

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

2、在模板中简单使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

注：小编以为，使用vue-lazyload的缺点在于，图片的大小以及位置无法自定义，它始终都会以父元素大小为准进行拉大或缩小，这样会导致loading图显示十分难看，以及默认图片压缩或扩大，UI不好看。若仅仅是需要加载图片之前显示占位默认图或者是需要图片加载失败时显示默认图，可以将该默认图设置为背景图，得到的是一样的效果。

四、nuxt.js添加百度统计代码

1、在static下的js的文件夹中新建baidu.js文件（当然这个文件名可以随便你取，在此小编就取baidu.js），并将你的百度统计代码放在baidu.js中
2、在nuxt.config.js配置

head: {
    script: [
     {src: '/js/baidu.js'},/*引入百度统计的js*/
    ]
},