zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    gsm at 指令
    wm8976 codec
    【Gym 100971J】Robots at Warehouse
    【XDU1144】合并模板
    腾讯云CentOS7安装LNMP+wordpress
    【USACO1.1】Broken Necklace
    【校赛小分队之我们有个女生】训练赛6
    【计导作业】——商品记录
    C 文件读写2
    C 文件读写1
  • 原文地址:https://www.cnblogs.com/alantao/p/8989555.html
Copyright © 2011-2022 走看看