vue 項目要使用的庫

1.Stylus是一個CSS預處理器。

npm install stylus --save-dev
npm install stylus-loader --save-dev

使用

<style lang="stylus" rel="stylesheet/stylus">
    @import "./header/header.styl"
</style>

 

2.animate.css 動畫庫

npm install animate.css --save

使用

<transition enter-active-class="animated fadeInRight">
    <router-view></router-view>
</transition>

控制時間快慢, 覆蓋animation-duration

<style lang="stylus" scoped>
.animated {animation-duration: 0.5s;}
</style>

 

3.better-scroll 滾動

npm install better-scroll --save

引用

import BScroll from 'better-scroll'
const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper)

在vue中

import BScroll from 'better-scroll';
  export default {
    data(){
      return {

      }
    },

    mounted(){
      this.$nextTick(() => {
        const scroll = new BScroll(this.$el);
      });
    }
  }

 

4.vue-awesome-swiper輪播圖

npm install vue-awesome-swiper --save

全局使用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

組件使用

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

　　

5.vue-lazyload圖片懶加載

npm install vue-lazyload --save

在main.js使用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' // 引入圖片懶加載模塊

// error，loading是圖片路徑, 用require引入
Vue.use(VueLazyload, {
  error: require('./assets/404.png'),
  loading: require('./assets/loading.gif'),
  attempt: 1
});

組件

<template>
    <img v-lazy="src" />
    <img v-lazy="'/static/images/index/Index-2.jpg'" alt="">
</template>