vue项目中引入第三方框架

element-ui

  npm install element-ui -- save;

  main.js中

    import Element from 'element-ui';

    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(Element);

 

swiper

  npm install vue-awesome-swiper --save

  main.js中

    import VueAwesomeSwiper from 'vue-awesome-swiper';

    import 'swiper/dist/css/swiper.css';
    Vue.use(VueAwesomeSwiper);
  
  页面中用法  
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <img src="../../assets/home/home_banner_1.png"/>
      </swiper-slide>
      <swiper-slide>
        <img src="../../assets/home/home_banner_2.png"/>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
 
    
     data中: 
      swiperOption: {
        loop: true,
        speed: 1000,
        autoplay: {
          delay: 2000,
          autoplayDisableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
 
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    }
  
  
posted @ 2018-12-19 15:11  Mr_R  阅读(1045)  评论(0编辑  收藏  举报