Change

package-lock.json

@@ -10432,6 +10432,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-3.4.2.tgz?cache=0&sync_timestamp=1581152404850&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fswiper%2Fdownload%2Fswiper-3.4.2.tgz",
+      "integrity": "sha1-Oda0ELGjmDPh9y07cpmd9fXjg5I="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz",
@@ -11086,6 +11091,14 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1582745937656&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-awesome-swiper": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-2.6.7.tgz",
+      "integrity": "sha1-I7Es8QdQMwXCZ988fCkD+zmJbNA=",
+      "requires": {
+        "swiper": "^3.4.2"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz?cache=0&sync_timestamp=1573306368916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^2.6.7",
     "vue-router": "^3.1.5"
   },
   "devDependencies": {

src/main.js

@@ -2,13 +2,16 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import fastClick from "fastclick";
+import VueAwesomeSwiper from "vue-awesome-swiper";
 // CSS文件引入
 import "styles/reset.css";
 import "styles/border.css";
 import "styles/iconfont.css";
+import "swiper/dist/css/swiper.css";
 
 Vue.config.productionTip = false;
 fastClick.attach(document.body);
+Vue.use(VueAwesomeSwiper)
 
 new Vue({
   router,

src/pages/home/components/Swiper.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="wrapper">
+    <swiper :options="swiperOption">
+      <!-- slides -->
+      <swiper-slide v-for="item of swiperList" v-bind:key="item.id">
+        <img class="Swiper-img" v-bind:src="item.imgUrl" />
+      </swiper-slide>
+      <!-- Optional controls -->
+      <div class="swiper-pagination" slot="pagination"></div>
+      <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
+    </swiper>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeSwiper",
+  data: function() {
+    return {
+      swiperOption: {
+        pagination: ".swiper-pagination",
+        loop: true
+      },
+      swiperList: [
+        {
+          id: "0001",
+          imgUrl:
+            "http://img1.qunarzz.com/sight/p0/1508/80/29eaf59b380bef97acacba8a8f6efd2a.water.jpg_600x330_76f8cfee.jpg"
+        },
+        {
+          id: "0002",
+          imgUrl:
+            "http://img1.qunarzz.com/sight/p0/1505/73/73b2d79cae228337.water.jpg_600x330_edecfc9c.jpg"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.wrapper >>> .swiper-pagination-bullet-active
+  background #ffffff !important
+.wrapper
+  overflow hidden
+  width 100%
+  height 0
+  padding-bottom 28.1%
+  background #eeeeee
+.Swiper-img
+  width 100%
+  height 2.34rem
+</style>

src/pages/home/home.vue

@@ -1,18 +1,21 @@
 <template>
   <div>
     <home-header></home-header>
+    <home-swiper></home-swiper>
   </div>
 </template>
 
 <script>
 // 组件引入
 import HomeHeader from "./components/Header";
+import HomeSwiper from "./components/Swiper";
 export default {
   //单页组件名
   name: "Home",
   // 组件注册
   components: {
-    HomeHeader: HomeHeader
+    HomeHeader: HomeHeader,
+    HomeSwiper: HomeSwiper
   }
 };
 </script>