From f1b2614551225f3fab63eb213c8e3a89dae55c94 Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Thu, 6 Sep 2018 16:37:00 +0800
Subject: [PATCH] 'add'

---
 .babelrc                     | 32 +++++++++++++++++++++++++-------
 README.md                    |  2 +-
 package.json                 |  2 ++
 src/main.js                  |  4 ++++
 src/view/goodsDetail.vue     |  9 ++++-----
 src/view/test.vue            | 31 ++++++++++++++++---------------
 static/mock/goodsDetail.json |  7 +++++++
 7 files changed, 59 insertions(+), 28 deletions(-)
 create mode 100644 static/mock/goodsDetail.json

diff --git a/.babelrc b/.babelrc
index 3a280ba..eb95c4c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +1,30 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "last 2 versions",
+            "not ie <= 8"
+          ]
+        }
       }
-    }],
+    ],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
-}
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 9681dbf..598bac8 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-chapter25 商品详情页
\ No newline at end of file
+26、有赞Vant组件库的引入及轮播图片预览的实现①
\ No newline at end of file
diff --git a/package.json b/package.json
index b851844..d554c97 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",
+    "vant": "^1.3.0",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-lazyload": "^1.2.6",
@@ -26,6 +27,7 @@
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-import": "^1.8.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
diff --git a/src/main.js b/src/main.js
index 4349725..1e34440 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,11 +6,15 @@ import 'styles/reset.css'
 import 'styles/border.css'
 import 'styles/iconfont.css'
 import 'lib-flexible/flexible.js'
+import 'vant/lib/vant-css/index.css';
 
 Vue.use(VueLazyload, {
   loading: '/static/images/loading.gif'
 })
 
+import { Button } from 'vant';
+Vue.use(Button)
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
diff --git a/src/view/goodsDetail.vue b/src/view/goodsDetail.vue
index 4325175..c1f620c 100644
--- a/src/view/goodsDetail.vue
+++ b/src/view/goodsDetail.vue
@@ -4,7 +4,7 @@
     <div class="carousel">
       <swiper :options="swiperOption" ref="mySwiper">
         <swiper-slide v-for="(item,index) in swiperData" :key="index">
-          <img class="myswiper_img" :src="item" alt="">
+          <img class="myswiper_img" :src="item">
         </swiper-slide>
         <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
@@ -78,6 +78,7 @@
       </div>
       <div class="shopcart_add">加入购物车</div>
     </div>
+
   </div>
 </template>
 
@@ -116,9 +117,7 @@ export default {
     };
   },
   created() {},
-  mounted() {
-    //this.getIndexData();
-  },
+  mounted() {},
   watch: {},
   computed: {},
   methods: {
@@ -246,7 +245,7 @@ export default {
       margin-right: 0.4rem;
       .service_text_item_icon {
         color: @themeColor;
-        margin-right: .053333rem;
+        margin-right: 0.053333rem;
       }
     }
   }
diff --git a/src/view/test.vue b/src/view/test.vue
index 5adb796..bcdaebc 100644
--- a/src/view/test.vue
+++ b/src/view/test.vue
@@ -1,32 +1,33 @@
 <template>
-    <div class="test">
-        <test-com @childFn="parentFn"></test-com>
-        <br/> 子组件传来的值 : {{message}}
-    </div>
+  <div class="test">
+    <van-button type="default">默认按钮</van-button>
+  </div>
 </template>
 
 <script>
-import TestCom from "@/components/testCom";
+import { ImagePreview } from "vant";
 
 export default {
   name: "test",
-  components: {
-    TestCom
-  },
+  components: {},
   data() {
     return {
       message: ""
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    ImagePreview([
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/161/fe69644b-04e6-46c5-8e3b-f750db9ef1e7_720x909_70.jpg",
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/116/e1498661-f21f-45b3-9c7a-557684532133_720x909_70.jpg",
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/148/802e9012-d83c-4c21-a219-436f82b51709_720x909_70.jpg",
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/159/950fdbff-6359-4125-a2e2-6b8a997e30ec_720x909_70.jpg",
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/26/938433c5-cc0a-44e0-9074-5249d873de20_720x909_70.jpg",
+      "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/20/84/5ae7b596-5c69-41c5-b9db-bef670f51760_720x909_70.jpg"
+    ]);
+  },
   watch: {},
-  computed: {},
-  methods: {
-    parentFn(payload) {
-      this.message = payload;
-    }
-  }
+  computed: {}
 };
 </script>
 
diff --git a/static/mock/goodsDetail.json b/static/mock/goodsDetail.json
new file mode 100644
index 0000000..4ce902e
--- /dev/null
+++ b/static/mock/goodsDetail.json
@@ -0,0 +1,7 @@
+{
+    "code": 200,
+    "msg": "",
+    "goodsDetail": {
+        "swiperImg": []
+    }
+}
\ No newline at end of file