vue轮播图，安装less

因为是在轮播图放在全局了。所以都可以使用

vue调接口使用轮播图

首先npm i axios 装上，并使用

<template>
  <div id="app">
    <!-- 因为在main.js中全局引入过了，所以组件可以直接拿来用 -->
    <swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
      <!--  @click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件 -->
      <swiper-slide
        v-for="(v, i) in imgList"
        :key="i"
        @click.native="goto(v.url)"
      >
        <img :src="v.imgurl" width="100%" height="100%" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "App",
  created: function () {
    /* 数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，
    导致配置无缝轮播的时候效果出不来 怎么办？*/
    /* 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，
    数据到了，再加载 */
    axios.get("/data/imgJson.json").then((res) => {
      this.imgList = res.data.imglist;
      /* 使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 */
      /* 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，
      担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法 */
      this.$nextTick(()=>{
        /* 在异步操作里面slideTo第一个参数表示第几张  */
        this.$refs.mySwiper.swiper.slideTo(2,1000,false)
      })
    });
  },
  methods: {
    goto: function (url) {
      /* console.log(url) */
      /* window.open会打开一个新的窗口 */
      window.open(url);
      /* location.href在当前页跳转 */
      /* location.href = url; */
    },
  },
  data() {
    return {
      imgList: [],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop:true,
        autoplay: {
          delay: 1000,
          /* 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 */
          stopOnLastSlide: false,
          /* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
          disableOnInteraction: false,
        },
      },
    };
  },

less安装并使用

• 1、npm i less --save-dev
• 2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
• 3、lessc -v 查看版本
• 4、在main.js import less from 'less' Vue.use(less)

 <div id="app">
    <div class="box">
      <h1>欢迎使用less</h1>
    </div>
    <div class="box1">
      <div class="box2">
        <div class="box3"></div>
      </div>
    </div>
    <ul>
      <li v-for="(v,i) in 4" :key='i'>{{v}}</li>
    </ul>
    <div class="a1">我是box1</div>
    <div class="a2">我是box2</div>

.text(@color:red,@size:14px){
    background:@color;
    font-size: @size
  };
  .a1{
   .text()
  };
  .a2{
    .text(@color:rgb(0, 255, 13),@size:30px)
  }
  
  
  ul{
    width: @k;
    height: @k;
    background: @colorRed;
  }
  li:nth-of-type(1){
    width: @k - 20px;
    background:@colorGreen
  }
  li:nth-of-type(2){
    width: @k + 20px;
    background:@colorBlue   
  }
  .box1{
    width:@k ;
    height: @k;
    background:@colorGreen; 
    .box2{
      width: @k/2;
      height: @k/2;
      background:@colorBlue 
    }
  }

还可以新建一个文件夹，里面放less文件

在导入