Libraries to be used by the vue project

1. Stylus is a CSS preprocessor.

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

use

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

 

2.animate.css animation library

$ npm install animate.css --save

use

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

Control time speed, override animation-duration

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

 

3.better-scroll scrolling

$ npm install better-scroll --save

quote

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

in vue

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

      }
    },

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