Commit

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
+    <!-- 保持TCP连接 -->
     <keep-alive>
-      <router-view />
+      <!-- <router-view>标签会渲染路径匹配到的视图组件，例如这里的<router-view>代表的是根目录。 -->
+      <router-view></router-view>
     </keep-alive>
   </div>
 </template>

src/commom/fade/FadeAnimation.vue

@@ -1,8 +1,10 @@
 <template>
+  <!-- 提供两个插槽 -->
   <transition><slot></slot></transition>
 </template>
 
 <script>
+// 该组件主要实现进入和退出的过渡动画
 export default {
   name: "Fade"
 };

src/commom/gallery/Gallery.vue

@@ -24,6 +24,7 @@ export default {
   },
   data: function() {
     return {
+      // swiper设置
       swiperOptions: {
         pagination: ".swiper-pagination",
         paginationType: "fraction",
@@ -34,10 +35,11 @@ export default {
   },
   methods: {
     handleGalleryClick: function() {
+      // 被点击向外触发close事件
       this.$emit("close");
     }
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>

src/main.js

@@ -1,22 +1,29 @@
 import Vue from "vue";
 import App from "./App.vue";
+// 引入Vue-router组件，用于管理多页面跳转。
 import router from "./router";
+// 引入fastclick库，用于移除移动端点击300毫秒延迟
 import fastClick from "fastclick";
+// 引入VueAwesomeSwiper库，用于实现首页轮播图效果
 import VueAwesomeSwiper from "vue-awesome-swiper";
+// 引入Vuex创建的仓库
 import store from "./store";
 import "babel-polyfill";
-// CSS文件引入
+// 引入全局CSS文件
 import "styles/reset.css";
 import "styles/border.css";
 import "styles/iconfont.css";
 import "swiper/dist/css/swiper.css";
 
 Vue.config.productionTip = false;
+// 在全局中引入fastclick库，移除移动端点击300毫秒延迟。
 fastClick.attach(document.body);
-Vue.use(VueAwesomeSwiper)
+// VueAwesomeSwiper是标准的Vue插件，含有install方法，所以使用Vue.use()调用更方便。
+Vue.use(VueAwesomeSwiper);
 
 new Vue({
   router,
+  // 创建根Vue实例时把由Vuex创建的仓库传递进去，每一个组件都可以使用store。
   store,
   render: h => h(App)
 }).$mount("#app");

src/pages/city/City.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+// 引入组件和插件
 import CityHeader from "./components/header";
 import CitySearch from "./components/search";
 import CityList from "./components/list";
@@ -33,6 +34,7 @@ export default {
     };
   },
   methods: {
+    // AJAX
     getCityInfo: function() {
       axios.get("/api/city.json").then(this.getCityInfoSucc);
     },
@@ -44,7 +46,10 @@ export default {
         this.hotCities = data.hotCities;
       }
     },
+    // 监听到Change事件触发handleLetterChange方法
     handleLetterChange: function(Letter) {
+      // 将Alphabet组件传递来的数据赋予父组件中的letter，这里记录了被点击的元素
+      // 这个值同时传递给了List组件，这个组件中有一个watch监听器
       this.letter = Letter;
     }
   },

src/pages/city/components/Alphabet.vue

@@ -28,10 +28,12 @@ export default {
       timer: null
     };
   },
-  updata: function() {
+  updated: function() {
+    // 利用ref算出元素A距离组件顶端的高度
     this.startY = this.$refs["A"][0].offsetTop;
   },
   computed: {
+    // 用计算属性将父组件传递过来的cities值遍历成一个列表
     letters: function() {
       const letters = [];
       for (let i in this.cities) {
@@ -41,37 +43,46 @@ export default {
     }
   },
   methods: {
+    // 绑定三个触摸事件touchstart、touchmove、touchend
     handleLetterClick: function(e) {
+      // 向外触发事件Change，并传递参数：被点击的元素
       this.$emit("Change", e.target.innerText);
     },
     handleTouchStart: function() {
+      // 给touchstart添加事件修饰符.prevent，阻止默认事件，让他不能滚动
+      // touchstart事件的作用并非让其滚动
       this.touchStatus = true;
     },
     handleTouchMove: function(e) {
+      // 如果touchstart事件触发，这里的touchStatus为true
       if (this.touchStatus) {
         if (this.timer) {
           clearTimeout(this.timer);
         }
         this.timer = setTimeout(() => {
+          // clientY：事件发生时鼠标（手指）在浏览器的内容区域坐标
+          // 79是header组件的高度
           const touchY = e.touches[0].clientY - 79;
+          // 20是每个字母元素的高度
           const index = Math.floor((touchY - this.startY) / 20);
           if (index >= 0 && index < this.letters.length) {
+            // 向外触发事件Change
             this.$emit("Change", this.letters[index]);
           }
         }, 16);
       }
     },
     handleTouchEnd: function() {
+      // 滑动结束
       this.touchStatus = false;
     }
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>
 @import '~styles/variable.styl'
-// 应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
-//  https://blog.csdn.net/lijingshan34/article/details/88350456
+// 应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发
 // *
 //   touch-action: none
 .list

src/pages/city/components/list.vue

@@ -52,6 +52,7 @@ export default {
   },
   computed: {
     ...mapState({
+      // 将city映射到计算属性currentCity
       currentCity: "city"
     })
   },
@@ -60,18 +61,23 @@ export default {
       // 不存在大量同步操作或者异步操作，所以组件可以直接调用mutations，而不需要actions转发
       // this.$store.dispatch("changeCity", city);
       this.$store.commit("changeCityMutations", city);
+      // 编程式导航，效果类似<router-link>
       this.$router.push("/");
     }
   },
   watch: {
+    // 当父组件传递进来的值发生改变则触发监听器
     letter: function() {
       if (this.letter) {
+        // 在HTML中使用ref获取到的是DOM
         const element = this.$refs[this.letter][0];
+        // 使用BScroll跳转到该字母
         this.BScroll.scrollToElement(element);
       }
     }
   },
   mounted: function() {
+    // 对.wrapper使用BScroll插件
     this.BScroll = new BScroll(this.$refs.wrapper);
   }
 };

src/pages/city/components/search.vue

@@ -36,7 +36,9 @@ export default {
   },
   methods: {
     handleCityClick: function(city) {
+      // Vuex 通过commit直接操作mutations
       this.$store.commit("changeCityMutations", city);
+      // 跳转回根路径
       this.$router.push("/");
     }
   },
@@ -48,6 +50,7 @@ export default {
     };
   },
   computed: {
+    // 当列表长度为零，hasNoData则为true
     hasNoData: function() {
       return !this.list.length;
     }
@@ -62,13 +65,16 @@ export default {
         return;
       }
       this.timer = setTimeout(() => {
+        // 搜索结果是一个数组
         const result = [];
         for (let i in this.cities) {
           this.cities[i].forEach(value => {
             if (
+              // 用indexOf方法查找关键词是否存在
               value.spell.indexOf(this.keyword) > -1 ||
               value.name.indexOf(this.keyword) > -1
             ) {
+              // 如果存在将value放入结果数组
               result.push(value);
             }
           });

src/pages/detail/components/banner.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script>
+// 组件化
 import CommitGallery from "commom/gallery/Gallery";
 import FadeAnimation from "commom/fade/FadeAnimation";
 
@@ -34,7 +35,7 @@ export default {
   data: function() {
     return {
       showGallery: false
-    }
+    };
   },
   components: {
     CommitGallery: CommitGallery,
@@ -42,9 +43,11 @@ export default {
   },
   methods: {
     handleBannerClick: function() {
+      // 点击时显示Gallery组件
       this.showGallery = true;
     },
     handleGalleryClose: function() {
+      // 点击时关闭Gallery组件
       this.showGallery = false;
     }
   }

src/pages/detail/components/header.vue

@@ -31,7 +31,7 @@ export default {
         opacity = opacity > 1 ? 1 : opacity;
         this.opacityStyle = {
           opacity: opacity
-        }
+        };
         this.showAbs = false;
       } else {
         this.showAbs = true;
@@ -44,7 +44,7 @@ export default {
   deactivated: function() {
     window.removeEventListener("scroll", this.handleScroll);
   }
-}
+};
 </script>
 
 <style lang="stylus" scoped>

src/pages/detail/components/list.vue

@@ -37,7 +37,7 @@ export default {
   line-height .8rem
   font-size .32rem
   padding 0 .2rem
-// 我把item-children卸载item-title下就可以不用设置item-children的样式
+// 我把item-children写在item-title下就可以不用设置item-children的样式
 // .item-children
 //   padding 0 .2rem
 </style>

src/pages/home/components/Header.vue

@@ -8,6 +8,7 @@
     </div>
     <router-link to="/city">
       <div class="header-right">
+        <!-- 来自Vuex中的state -->
         {{ this.city }}<span class="iconfont">&#xe65c;</span>
       </div>
     </router-link>
@@ -15,11 +16,13 @@
 </template>
 
 <script>
+// mapState是Vuex提供的一个API
 import { mapState } from "vuex";
 
 export default {
   name: "HomeHeader",
   computed: {
+    // 将公用数据city映射到组件的计算属性中
     ...mapState(["city"])
   }
 };

src/pages/home/components/Icons.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="icons">
     <swiper :options="swiperOption">
+      <!-- 根据页数v-for循环出两个swiper-slide -->
       <swiper-slide v-for="(page, index) of pages" :key="index">
         <div class="icon" v-for="item of page" :key="item.id">
           <div class="icon-img">
@@ -17,14 +18,16 @@
 export default {
   name: "HomeIcons",
   props: {
+    // 接收来自父组件传递的值
     list: Array
   },
   data: function() {
     return {
       swiperOption: {
+        // 关闭swiper插件的自动播放
         autoplay: false
       }
-    }
+    };
   },
   computed: {
     // 将页面分为开，8个为一页

src/pages/home/components/Swiper.vue

@@ -20,6 +20,7 @@ export default {
   },
   data: function() {
     return {
+      // swiper组件的一些设置
       swiperOption: {
         pagination: ".swiper-pagination",
         loop: true

src/pages/home/home.vue

@@ -15,6 +15,7 @@ import HomeSwiper from "./components/Swiper";
 import HomeIcons from "./components/Icons";
 import HomeRecommend from "./components/Recommend";
 import HomeWeekend from "./components/Weekend";
+// 插件引入
 import axios from "axios";
 import { mapState } from "vuex";
 
@@ -29,6 +30,7 @@ export default {
     HomeRecommend: HomeRecommend,
     HomeWeekend: HomeWeekend
   },
+  // 组件中的data必须是一个函数
   data: function() {
     return {
       lastCity: "",
@@ -43,12 +45,17 @@ export default {
   },
   methods: {
     getHomeInfo: function() {
+      // 使用axios的get方法发送ajax请求，并且执行getHomeInfoSucc方法
       axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
     },
     getHomeInfoSucc: function(res) {
+      // 将获取的数据赋予自有变量
       res = res.data;
+      // 判断数据是否存在
       if (res.ret && res.data) {
+        // 将获取的数据赋予自有常量
         const data = res.data;
+        // 用自有常量传递给$data中的值
         this.swiperList = data.swiperList;
         this.iconList = data.iconList;
         this.recommendList = data.recommendList;
@@ -57,12 +64,17 @@ export default {
       }
     }
   },
+  // Vue生命周期钩子：在实例渲染之后，优先级在activated之上
   mounted: function() {
+    // 将city保存到lastCity中
     this.lastCity = this.city;
     this.getHomeInfo();
   },
+  // 访问使用keep-alive缓存的组件时触发：在mounted之后
   activated: function() {
+    // 判断当前获取的city和之前的获取city是否相同
     if (this.lastCity !== this.city) {
+      // 如果不相同，将lastCity重置，并且再次执行ajax请求
       this.lastCity = this.city;
       this.getHomeInfo();
     }

src/router/index.js

@@ -6,8 +6,11 @@ Vue.use(Router);
 export default new Router({
   routes: [
     {
+      // 路由路径
       path: "/",
+      // 命名路由
       name: "Home",
+      // 映射组件到路由，按需加载
       component: () => import("@/pages/home/home")
     },
     {
@@ -16,11 +19,13 @@ export default new Router({
       component: () => import("@/pages/city/City")
     },
     {
+      // 动态路由参数，以冒号标记
       path: "/detail/:id",
       name: "Detail",
       component: () => import("@/pages/detail/Detail")
     }
   ],
+  // 切换路由时让页面滚动到初始位置
   scrollBehavior(to, from, savedPosition) {
     return { x: 0, y: 0 };
   }

src/store/index.js

@@ -1,7 +1,9 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import state from "./state"
-import mutations from "./mutations"
+// 引入外部state文件
+import state from "./state";
+// 引入外部mutations文件
+import mutations from "./mutations";
 
 Vue.use(Vuex);
 
@@ -9,9 +11,11 @@ export default new Vuex.Store({
   state: state,
   // 不存在大量同步操作或者异步操作，所以组件可以直接调用mutations，而不需要actions转发
   // actions: {
+  //   定义的方法接受两个参数，一个是ctx，一个是city
   //   changeCity: function(ctx, city) {
   //     ctx.commit("changeCityMutations", city);
   //   }
   // },
+  // 调用mutations方法，这里的mutations是一个外部引入的文件
   mutations: mutations
 });

src/store/mutations.js

@@ -1,8 +1,11 @@
 export default {
+  // 这个方法需要两个参数，第一个参数指的是所有公用数据（即Vuex.Store中定义的state），第二个参数是传递进来的参数
   changeCityMutations: function(state, city) {
     state.city = city;
+    // localStorage使用需要搭配try-catch，因为有些浏览器可能关闭了localStorage，例如隐身模式
     try {
       if (localStorage.city) {
+        // localStorage是HTML5提供的本地存储API
         localStorage.city = city;
       }
     } catch (e) {}

src/store/state.js

@@ -1,4 +1,6 @@
+// 定义一个默认城市
 let defaultcity = "上海";
+// localStorage使用需要搭配try-catch，因为有些浏览器可能关闭了localStorage，例如隐身模式
 try {
   if (localStorage.city) {
     defaultcity = localStorage.city;
@@ -6,5 +8,6 @@ try {
 } catch (e) {}
 
 export default {
+  // city显示默认城市
   city: defaultcity
 };