一，头部区域的制作

新建git分支，然后创建router和对应的city组件

利用声明式导航，实现页面的跳转功能

二，实现基本页面的制作：

三，使用Better-Scroll的使用和字母表布局

https://github.com/ustbhuangyi/better-scroll 安装：

npm install @better-scroll/core

实现的效果：

四，城市页面的数据渲染

五，接下来要实现典型的列表联动

左右两个列表，左边点击右边跳到相应位置，右边滚动左边相应位置也高亮显示；这就是典型的列表联动。

第一步：先在字母的组件中定义事件，点击字母时可以取得字母的内容：

第二步，利用vuex把这个内容存到store中：

调用vuex中的函数，把字母传入

第三步：在list组件中导入这个字母。然后使用

第四步：在list组件中监听这个字母的变化： 这样，点击字母就会实现跳转：

六，实现滑动字母，左侧页面随之跳转

第一步：在滑动区域上定义滑动的事件

原理就是上图这样，计算高度，然后计算出滑动了几个字母，传给vuex中的数据。

第二步，将滑动了几个字母传给vuex,并在list的组件中调用

第三步，优化的两个小东西

1，把初始高度的获取放置在外面，这样就可以直接使用，而不是每次函数执行就又去获取计算一次。

2，节流的优化，让每隔15毫秒去执行滑动函数，而不是一直执行

七，实现搜索功能

第一步：实现搜索时，会出现对应的数据。

第二步，list组件中点击对应的城市，当前城市就会切换成这个，并且返回页面顶部

因为当前城市的数据信息好几个组件都需要使用到，所以需要存放在vuex中：

第三步，实现点击搜索到的城市，当前城市变化，然后搜索内容消失

因为是兄弟组件间传值，所以可以采用$emit和$on的方法：

第四步：需要把城市选择页面的数据共享给主页的城市上：

第五步，使用localstorage来保存当前页面选择好的城市

主要还是因为，我们的数据在页面一刷新，就会被重置，所以才会需要使用localstorage来保存当前页面选择好的城市 但是为了避免某些用户的浏览器关闭了导致程序无法运行，改写成：

八，将vuex的代码模块化

然后这个页面的内容就完成了，推送到码云上就可以。