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>