create Lesson06

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

README.md

@@ -1,2 +1,29 @@
 # youzan
 vue重构有赞商城
+
+## Lesson06
+
+### 购物车补充说明
++ 问题重现 ( 左滑删除后样式依然存在 )
++ [ref](https://cn.vuejs.org/v2/api/#ref) 是非响应式的，不建议在模板中进行数据绑定，即使用唯一标识绑定
++ [v-for](https://cn.vuejs.org/v2/guide/list.html#key) 模式使用“就地复用”策略，简单理解就是会复用原有的dom结构，尽量减少dom重排来提高性能 ( 解决方案：还原dom样式 )
++ [key](https://cn.vuejs.org/v2/api/#key) 为每个节点提供身份标识，数据改变时会重排，最好绑定唯一标识，如果用index标识可能得不到想要的效果 ( 解决方案：绑定唯一识别key )
+
+### 路由
+0. 效果演示：[vue-router的文档](https://router.vuejs.org/zh-cn/)、[用vue、vue-router重构文档](https://github.com/tonyfree/vue-router-gitbook)
+1. 使用路由插件
+2. 创建router示例：[构造配置](https://router.vuejs.org/zh-cn/api/options.html) ( mermber.vue )
+3. 在根实例注入
+4. 页面路由匹配的组件渲染：[router-view](https://router.vuejs.org/zh-cn/api/router-view.html)
+5. 路由导航：[router-link](https://router.vuejs.org/zh-cn/api/router-link.html)、[编程式导航](https://router.vuejs.org/zh-cn/essentials/navigation.html)
+6. [嵌套路由](https://router.vuejs.org/zh-cn/essentials/nested-routes.html) ( address.vue、all.vue、form.vue )
+7. [命名路由](https://router.vuejs.org/zh-cn/essentials/named-routes.html)
+8. 路由参数的传递：[路由信息对象](https://router.vuejs.org/zh-cn/api/route-object.html) ( type、instance、this.$route )
+9. [过渡效果](https://router.vuejs.org/zh-cn/advanced/transitions.html)
+10. [对组件的注入](https://router.vuejs.org/zh-cn/api/component-injections.html)、[Router示例](https://router.vuejs.org/zh-cn/api/router-instance.html) ( this.$router )
+
+### 地址操作
++ rap接口和mock数据
++ service封装：列表、新增、编辑、设为默认地址、删除
++ 省市区数据：数据结构参考[weui.js的级联picker](https://github.com/Tencent/weui.js/blob/master/docs/component/picker.md)
++ 原生select、confirm的效果 ( IOS上带host )

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,20 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.16.2",
+    "mint-ui": "^2.2.9",
+    "mockjs": "^1.0.1-beta3",
+    "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 +40,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>