vue仿去哪儿网实践笔记

用git建立仓库和本地的联系
1、安装vue脚手架
cnpm install vue-cli -g
2、使用vue-cli初始化项目 
vue init webpack my-project
3.安装项目依赖
cnpm i
4.查看初始化的项目
npm run dev
可以在config.js里修改是否自动打开浏览器
5.npm run build 生成本地打包文件，后在本地打开问题

6.目录介绍（待逐渐完善）
ststic 静态资源文件夹，可以通过浏览器直接访问源数据
build文件夹：
webpack.base.conf文件，可以设置路径代号
config文件夹：
index文件使用如下配置可以零时自动以路径名来测试数据
proxyTable: {
      '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
          '^/api':'/static/mock'
        }
      }
    },
    
7.一些准备文件和插件：
reset文件重置默认格式
border文件 1px像素边框设置
300秒点击延迟问题 
cnpm install fastclick -S
import FastClick from 'fastclick'；
FastClick.attach(document.body)；

使用stylus
cnpm install stylus
cnpm install stylus-loader --save-dev
使用less
cnpm install less less-loader
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

Vue-Awesome-Swiper轮播图插件
cnpm install vue-awesome-swiper --save
配置
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

axios工具发送ajax请求
cnpm install axios

vuex
安装
cnpm install vuex --save
配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

better-scroll
cnpm install better-scroll --save
使用 
需要两层包裹滑动区域，将父元素设置为overflow：hidden，内容区的元素就可以在父元素滚动
<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>
调用插件
import BScroll from 'better-scroll'
const scroll = new BScroll('.wrapper')

一些功能实现的笔记：

通过获得dom元素，设置根据字母表的跳转到对应区域元素，
在循环上绑定的ref获得的是数组，后面要加个索引0
letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
实现滑动字母表展现对应的城市列表：
页面一开始挂载时用的是初始空数据，ajax完成数据请求后，会触发updated函数，这个时候计算一次字母A的offsetTop 距离
通过距离计算出滑动到哪一个字母传递给对应的函数，改变到字母对应的城市列表，
使用定时器设置一个函数节流进行性能优化
updated () {
    this.startY = this.$refs['A'][0].offsetTop
  },      
handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / 20)
          if (index >= 0 && index < this.letters.length) {
            this.$emit('change', this.letters[index])
          }
        }, 16)
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }      
      
实现搜索城市功能
建立一个div，层级高于初始城市展示页面，绝对定位到搜索框下面，根据搜索框是否有输入keyword来判断是否展示该div。
根据搜索词和预定的城市列表数据（spell是拼音，name是汉字）比较产生一个新数组，传递到div里展示。
因为搜索出来的城市列表可能超过屏幕需要滑动，也使用了better-scroll插件
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
        }
        this.list = result
      }, 100)
    }
  },
  
实现选择城市后，首页数据城市展示也变化，使用了vuex数据共享。
使用localstage实现数据保存
state模块：
let defaultcity = "上海"
try {
    if (localStorage.city)
        defaultcity = localStorage.city
} catch (e) {
}
export default {
    city: defaultcity
}
mutation模块：
export default {
    changeCity(state, city) {
        state.city = city
        try {
            localStorage.city = city
        } catch (e) {}
    }
}

利用keep-alive缓存数据，切换页面时可以直接读取缓存的页面数据，不用再次发ajax请求
但是有时数据会需要更新，方法一：exclude，对应的组件不会被缓存 方法二：keep-alive带有一个钩子函数activated，可以在里面增加判断来是否发送数据请求
<keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
    方法二：如果存的城市和现在城市不一样，调用请求函数
    activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }
  
  
 提前设置好盒子大小，防止图片没加载好之前后面的数据挤到上面来，图片加载好又被挤回正常位置的抖动问题
  overflow: hidden
    height: 0
    padding-bottom: 55%
    
通过画廊自适应布局，实现图片展示在正中间，使用swiper插件进行一些设置    
display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000
全局事件的解绑，监听滑动事件，绑定到了window对象，在不相关页面也会触发，所以当deactivated时（keep-alive 组件停用时调用），解除绑定
     mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }