'add'

.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
+      }
+    ]
+  ]
+}

README.md

@@ -1 +1 @@
-chapter25 商品详情页
+26、有赞Vant组件库的引入及轮播图片预览的实现①

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",

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 */

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;
       }
     }
   }

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>
 

static/mock/goodsDetail.json

@@ -0,0 +1,7 @@
+{
+    "code": 200,
+    "msg": "",
+    "goodsDetail": {
+        "swiperImg": []
+    }
+}