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
          }
        }
      
      
  • 相关阅读:
    删除重复数据
    jquery删除文件
    统计目录下文件数及大小
    koa generator
    如何做单测? 单测和开发占比应该是多少?集成测试
    webpack之loader和plugin简介
    服务端渲染
    请求头包含哪些部分
    vue的高阶组件
    amd,cmd规范
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10143422.html
Copyright © 2011-2022 走看看