zoukankan      html  css  js  c++  java
  • 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
          }
        }
      
      
  • 相关阅读:
    MyBatis
    JavaAgent
    Intellij IDEA
    SVN安装总结
    git(笔记)
    springboot面试题
    spring总结
    springmvc总结
    jdbc链接数据库
    redis面试题
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10143422.html
Copyright © 2011-2022 走看看