created Lesson04

.babelrc

@@ -8,7 +8,12 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", ["component", [
+    {
+      "libraryName": "mint-ui",
+      "style": true
+    }
+  ]]],
   "env": {
     "test": {
       "presets": ["env", "stage-2"],

build/webpack.base.conf.js

@@ -23,7 +23,10 @@ module.exports = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
+      '@': resolve('src'),
+      'css': '@/modules/css',
+      'js': '@/modules/js',
+      'components': '@/components'
     }
   },
   module: {

package.json

@@ -10,13 +10,19 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.16.2",
+    "mint-ui": "^2.2.9",
+    "qs": "^6.5.0",
+    "swiper": "^3.4.2",
+    "velocity-animate": "^1.5.0",
     "vue": "^2.3.3",
     "vue-router": "^2.6.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^0.10.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
@@ -33,18 +39,18 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

src/components/Swipe.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swp-page swiper-slide" v-for="list in lists">
+        <a class="js-no-follow" :href="list.clickUrl">
+          <img class="goods-main-photo fadeIn" :src="list.image">
+        </a>
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+// swiper对dom节点进行操作的，dom节点什么生成？mounted
+import Swiper from 'swiper'
+import 'swiper/dist/css/swiper.css'
+
+export default {
+  // props: ['lists'],
+  props: {
+    lists: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      new Swiper('.swiper-container', {
+        loop: true,
+        pagination: '.swiper-pagination'
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+}
+</style>